/*
Theme Name:Home Cleaning Service
Theme URI: 
Author: Webnotick 
Author URI: www.Webnotick.com
Description: This is All Cleaning Services theme. 
Version: 0.3
Requires at least: 5.1
Requires PHP: 5.6
Tested up to: 5.9
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: the-corporate-business
Tags: translation-ready, custom-background, theme-options, custom-menu, threaded-comments, featured-images, footer-widgets, left-sidebar, editor-style, right-sidebar, full-width-template, two-columns, three-columns, custom-colors, custom-header, custom-logo

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

The Corporate Business  is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
    ## Links
    ## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
    ## Posts and pages
    ## Comments
# Infinite scroll
# Layouts and Titles
# Media
    ## Captions
    ## Galleries
# Social Icons
# Breadcrumb List
# Homepage Sections
    ## Featured Slider Section
    ## Featured  Section
    ## Featured type_of_work Section
    ## Featured Classes Section
    ## Featured Testimonial Section
    ## Latest Posts Section
# Footer
# Responsive

--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Kanit: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');

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html {
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-weight: 400;
    background-color: #000;
}

/* $text-color: #333 !default; // very dark grey */

.container-fluid {
    padding: 0 0;
}

#section-header .border-b-2 {
    border-bottom: 4px solid #000;
}

#content {
    position: relative;
}

/*#content .entry-content p {
    color: #000;
    margin: 30px 0px 30px;
}*/

#content .wp-block-details p{
    color: #A1A1A1;
    margin: 0px 30px;
}

.boxed-layout,
.frame-layout {
    background-color: #f6f6f6;
}

.boxed-layout #page {
    max-width: 1600px;
    width: 90%;
    margin: 0 auto;
    background-color: #fff;
}

.frame-layout #page {
    max-width: 1600px;
    width: 90%;
    margin: 50px auto;
    background-color: #1a1a1a;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],
template {
    display: none;
}

a {
    background-color: transparent;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: bold;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    color: #282828;
    margin: 16px 0;
    line-height: 1.3;
    font-weight: 400;
}

mark {
    background: #ff0;
    color: #111;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
}

figure {
    margin: 1em 40px;
}

hr {
    box-sizing: content-box;
    height: 0;
}

pre {
    overflow: auto;
}

code,
kbd,
pre,
samp {
    font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

button {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input {
    line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
}

optgroup {
    font-weight: bold;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

#wp-calendar {
    display: table;
    width: 100%;
    margin-bottom: 0;
}

tbody {
    text-align: left;
}

tr {
    border: 1px solid #aaa;
}

td,
th {
    padding: 5px;
    font-weight: 400;
}

td#next {
    text-align: right;
}

.social-links a[href*="twitter.com"]:before {
    content: "\e61b";
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
    color: #666;
    font-size: 16px;
    line-height: 28px;
    word-wrap: break-word;
}

p {
    margin: 0 0 1em;
}

p:last-child {
    margin-bottom: 0;
}

blockquote {
    margin: 0 1.5em;
}

address {
    margin: 0 0 1.5em;
}

.md-0 {
    margin: 0 0;
}

.pd-0 {
    padding: 0 0;
}

pre {
    background: #f6f6f6;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

code,
kbd,
tt,
var {
    font-size: 15px;
    font-size: 0.9375rem;
}

abbr,
acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

mark,
ins {
    background: #fff9c0;
}

big {
    font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*,
*:before,
*:after {
    /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
    box-sizing: inherit;
}

body {
    background: #fff;
    /* Fallback for when there is no custom background color defined. */
    overflow-x: hidden;
    counter-reset: my-sec-counter;
}

blockquote {
    font-size: 18px;
    line-height: 35px;
    position: relative;
    margin: 0;
}

blockquote.alignright {
    padding-right: 0;
    margin-bottom: 14px;
}

hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}

ul,
ol {
    margin: 0;
    padding-left: 1.5em;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li>ul,
li>ol {
    margin-bottom: 0;
    margin-left: 0.5em;
}

dt {
    font-weight: bold;
    margin-bottom: 1em;
}

dd {
    margin: 0 1.5em 1.5em;
}

img {
    height: auto;
    /* Make sure images are scaled correctly. */
    max-width: 100%;
    /* Adhere to container width. */
    vertical-align: middle;
}

figure {
    margin: 0;
    /* Extra wide images within figure tags don't overflow the content area. */
}

table {
    margin: 0 0 1.5em;
    width: 100%;
    display: inline-block;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
/*button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    background: #01549a;
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; 
    border-radius: 0;
    padding: 10px 45px;
     margin: 5px 0 5px 0px; 
    text-align: center;
    position: relative;
    display: inline-block;
    transition: 0.5s;
    color: #fff;
    transition: all 0.5s ease-in-out;
    border: none;
    font-weight: 300;
    font-size: 18px;
    letter-spacing: 0.59px;
    text-transform: uppercase;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    color: #000;
    background-color: #fdc401;
    border-color: #000;
    text-decoration: none;
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
    color: #fff;
    border-color: #000;
    outline: thin dotted;
    text-decoration: none;
}*/

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    color: #000;
    border: 1px solid #01549a;
    background-color: #fff;
    padding: 12px;
    width: 100%;
}

select {
    border: 1px solid #021338;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
    color: #333;
    outline: thin dotted;
}

textarea {
    width: 100%;
}

/*#respond input[type="checkbox"] {
    min-height: auto;
    height: auto;
    float: left;
    margin-right: 10px;
    width: auto;
}

#respond .comment-form-cookies-consent label {
    display: table;
    margin: 0;
    line-height: 1;
}

#commentform .comment-form-cookies-consent {
    clear: both;
    display: inline-block;
    width: 100%;
    margin-top: 25px;
    margin-bottom: 0;
}

p.form-submit {
    clear: both;
    display: inline-block;
    position: relative;
}

.comment-notes {
    font-size: 14px;
    margin-top: 0;
}

#respond label {
    margin-bottom: 15px;
    display: block;
    color: #3f536d;
    font-weight: 500;
}

#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"] {
    width: 100%;
}*/

/*#commentform p {
    margin-bottom: 21px;
    color: #444;
}

#commentform p.comment-form-comment {
    margin-bottom: 0;
}

#commentform p.form-submit {
    margin: 21px 0 0;
}

#comments {
    margin-top: 35px;
    background-color: #fff;
}*/

/*#respond {
    margin-top: 35px;
    box-shadow: 0px 3px 22px 0px #00000029;
    padding: 15px;
}
.single-service #respond,
.single-project #respond{
    display: none;
}*/
/*.logged-in-as a {
    color: #01549a;
    text-decoration: none;
}

.logged-in-as a:hover,
.logged-in-as a:focus {
    color: #fdc401;
}
.required{
    color: #ff0000;
}*/
/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
    color: #c42118;
    text-decoration: underline;
}

/* a:hover,
a:focus,
a:active {
    color: #000;
} */

a:focus {
    outline: thin dotted;
}

/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
/* ///////top header/ ///////////// */
#section-header {
    width: 100%;/*change 80%-100%*/
    height: 70px;
    /* background-color: #3f536d; */
    opacity: 1;
    /* margin-top: 1%; */
    /*margin: 0 10% 0;*/
}

/* /////// bottom header ////// */
.bottomheader {
    background-color: #FFFFFF;
    position: relative;
    padding: 15px 27px;
    /*margin: 1.7% 0 1%;*/
}

#top-bar {
    padding: 5px 0;
    background-color: #c42118;
}

#top-bar a {
    text-decoration: none;
}

#top-bar .widget {
    text-align: center;
    margin-bottom: 0;
    font-size: 16px;
}

#top-bar .widget+.widget {
    margin-top: 15px;
}

.widget_address_block ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget_address_block ul li {
    display: inline-block;
}

.widget_address_block ul li i {
    margin-right: 8px;
}

#top-bar .widget_address_block ul li {
    color: #fff;
    margin-right: 30px;
}

#top-bar .widget_address_block ul li a {
    color: #fff;
}

#top-bar .widget_address_block ul li a:hover,
#top-bar .widget_address_block ul li a:focus {
    opacity: 0.8;
}

#top-bar .widget ul li:not(:last-child) {
    margin-bottom: 0;
}

/*------------------------------------*/
.header-fixed {
    position: fixed !important;
    top: -42px;
    left: 0;
    width: 100%;
    background: #ffffff;
    max-width: 100%;
    z-index: 99999;
    transform: translateY(70px);
    transition: transform 500ms ease, background 200ms ease;
    padding: 15px 0px;
    margin: 0 !important;
    border-bottom: 1px solid #3f536d57;
    box-shadow: 0 0 10px 0 #3F536D;
}

#masthead {
    position: absolute;
    z-index: 3000;
    width: 100%;
}

#section-header a {
    text-decoration: none;
}

.md-0 {
    padding: 0 0;
    margin: 0 0;
}

.pd-0 {
    padding: 0 0;
}

.site-logo,
#site-identity {
    display: inline-block;
    vertical-align: middle;
}

.site-description {
    color: #fff;
    font-size: 18px;
    padding: 15px 0;
    font-weight: 400;
}

#site-identity .site-title a {
    color: #000;
    font-size: 35px;
    margin: 0 0 0px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

#site-identity .site-description {
    margin: 0;
    line-height: 1.3;
    color: #000;
    padding: 10px 0px;
    letter-spacing: 0.01em;
}

#section-header .site-logo a {
    display: block;
    margin-right: 0px;
}

#section-header .site-logo img {
    width: 100%;
    height: 62.34px;
}

#section-header .header-main {
    height: 95px;
}

#section-header .content-site {
    width: 100%;
    /*padding: 6px 0;*/
}

#section-header .content-site .addicon a {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1px;
}

#section-header .addicon {
    margin: 14px 0;
}

#section-header .content-site i,
#section-header .content-site svg {
    color: #000;
    padding-right: 8px;
    font-weight: 200;
    background: #ffffff;
    box-shadow: 0px 0px 30px -5px #000;
    margin: 0px 0px 0px 0px;
    width: 20px;
    position: absolute;
    right: 0;
    height: 20px;
    font-size: 5px;
    padding: 6px;
}

#section-header .topheadinfo .px-2::after {
    content: '';
    border-left: 2px solid #fff;
    height: 32px;
    margin: 0px 0px 0 10px;
}

.bottomheader .navbox {
    margin: 5px auto;
}

/*-----------Header Social Icon--------------*/

#section-header .social-links a {
    display: inline-block;
    font-size: 18px;
    color: #FFFFFF;
    margin-right: 20px;
    transition: all 0.2s ease-in-out;
    font-family: "Font Awesome 5 Brands" !important;
    padding: 3px 9px;
    margin: 15px 4px;
}

#section-header .social-links a:hover {
    color: #a1a1a1;
}

.social-links a:before {
    content: "\f1d0";
}

.social-links a[href*="facebook.com"]:before,
.social-links a[href*="fb.com"]:before {
    content: "\f39e";
}

.social-links a[href*="twitter.com"]:before {
    content: "\e61b";
}

.social-links a[href*="linkedin.com"]:before {
    content: "\f0e1";
}

.social-links a[href*="plus.google.com"]:before {
    content: "\f0d5";
}

.social-links a[href*="youtube.com"]:before {
    content: "\f167";
}

.social-links a[href*="dribbble.com"]:before {
    content: "\f17d";
}

.social-links a[href*="pinterest.com"]:before {
    content: "\f231";
}

.social-links a[href*="bitbucket.org"]:before {
    content: "\f171";
}

.social-links a[href*="github.com"]:before {
    content: "\f113";
}

.social-links a[href*="codepen.io"]:before {
    content: "\f1cb";
}

.social-links a[href*="flickr.com"]:before {
    content: "\f16e";
}

.social-links a[href$="/feed/"]:before {
    content: "\f09e";
}

.social-links a[href*="foursquare.com"]:before {
    content: "\f180";
}

.social-links a[href*="instagram.com"]:before {
    content: "\f16d";
}

.social-links a[href*="tumblr.com"]:before {
    content: "\f173";
}

.social-links a[href*="reddit.com"]:before {
    content: "\f1a1";
}

.social-links a[href*="vimeo.com"]:before {
    content: "\f194";
}

.social-links a[href*="digg.com"]:before {
    content: "\f1a6";
}

.social-links a[href*="twitch.tv"]:before {
    content: "\f1e8";
}

.social-links a[href*="stumbleupon.com"]:before {
    content: "\f1a4";
}

.social-links a[href*="delicious.com"]:before {
    content: "\f1a5";
}

.social-links a[href*="mailto:"]:before {
    content: "\f0e0";
}

.social-links a[href*="soundcloud.com"]:before {
    content: "\f1be";
}

.social-links a[href*="wordpress.org"]:before {
    content: "\f19a";
}

.social-links a[href*="wordpress.com"]:before {
    content: "\f19a";
}

.social-links a[href*="jsfiddle.net"]:before {
    content: "\f1cc";
}

.social-links a[href*="tripadvisor.com"]:before {
    content: "\f262";
}

.social-links a[href*="foursquare.com"]:before {
    content: "\f180";
}

.social-links a[href*="angel.co"]:before {
    content: "\f209";
}

.social-links a[href*="slack.com"]:before {
    content: "\f198";
}

.social-links a[href*="tiktok.com"]:before {
    content: "\e07b";
}

#section-header .content-site .social-links i {
    font-size: 24px;
    color: transparent;
    margin-right: 12px;
    background: #fff;
}

/*------------------------------------------------*/
#section-header .contact-number {
    display: none;
}

#section-header .contact-number i,
#section-header .contact-number svg {
    margin-right: 5px;
}

#section-header .contact-box {
    float: right;
    background: #c42118;
    border-radius: 19px;
    margin-right: 5em;
    color: #fff;
    text-align: center;
    padding: 10px 30px;
    position: relative;
    bottom: 21px;
}

#section-header .contact-box h3 {
    margin: 0;
    color: #fff;
    font-weight: 600;
    font-size: 21px;
}

#section-header .contact-box p,
.contact-box a {
    margin: 0;
    color: #fff;
    font-weight: 500;
    font-size: 18px;
}

#section-header .contact-header h3 {
    margin: 0;
}

#section-header .contact-header {
    margin-left: 44px;
}

#section-header .contact-header a {
    font-size: 19px;
    color: #fff;
    letter-spacing: 1px;
}

#section-header .contact-header .fas.fa-phone-alt {
    margin-right: 10px;
    color: #c42118;
}

.main-navigation {
    display: block;
    position: relative;
    width: 100%;
}

.main-navigation ul.nav-menu>li>a {
   /* margin: 0px 3px 0 0;*/
    overflow: hidden;
    transition: ease-in-out;
    color: #000000;
    font-weight: 500;
    font-size: 16px;
    /*letter-spacing: 0.53px;*/
}

.main-navigation .sub-menu li {
    opacity: 1;
    visibility: visible;
    transition: all 0.5s;
}

.main-navigation .sub-menu li:hover{
margin-left: 20px;
}

.main-navigation ul.nav-menu>li>a>i,
.main-navigation ul.nav-menu>li>a>svg {
    width: 45px;
    height: 45px;
    border-radius: 45px;
    line-height: 45px;
    background-color: #a1a1a1;
    display: inline-block;
    vertical-align: middle;
    color: #283B60;
    text-align: center;
}

.main-navigation ul ul {
    background-color: #01549a;
    text-align: left;
    padding: 0;
}

.main-navigation ul ul li a {
    padding: 12px 15px;
    background-color: #01549a;
    color: #fff;
}

.main-navigation ul ul a:after {
    float: right;
}

.main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation li {
    position: relative;
}

.main-navigation ul.nav-menu>li>a {
    position: relative;
    height: 100%;
}

.main-navigation ul.nav-menu>li:hover>a,
.main-navigation ul.nav-menu>li.focus>a {
    color: #f6bb19;
}

.main-navigation form.search-form input {
    background-color: #111;
    border-color: #111;
    color: #111;
    font-weight: 400;
}

.main-navigation a {
    display: block;
    font-weight: 400;
    color: #fff;
    text-transform: capitalize;
    font-size: 16px;
    line-height: 1.5;
}

.main-navigation ul ul {
    float: left;
    position: absolute;
    top: 100%;
    left: -999em;
    z-index: 99999;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation li li {
    display: block;
}

.main-navigation ul.nav-menu .current_page_item>a,
.main-navigation ul.nav-menu .current-menu-item>a,
.main-navigation ul.nav-menu .current_page_ancestor>a,
.main-navigation ul.nav-menu .current-menu-ancestor>a {
    color: #000000;
    /* padding: 5px 9px; */
    border-radius: 3px;
    /* margin-bottom: -6px; */
}

.main-navigation ul.nav-menu > li > a {
    padding: 5px 10px;
}

/*.main-navigation ul.nav-menu>li:last-child>a{
    padding: 5px 0px; 
    color: #fff;
    letter-spacing: 0.56px;
    font-size: 17px;
    background:#ff6a00;
    padding:10px 22px;
    border-radius:30px;;
    font-weight:600;
}*/

.main-navigation ul.nav-menu .sub-menu .current_page_item>a,
.main-navigation ul.nav-menu .sub-menu .current-menu-item>a,
.main-navigation ul.nav-menu .sub-menu .current_page_ancestor>a,
.main-navigation ul.nav-menu .sub-menu .current-menu-ancestor>a {
    color: #fff;
    background-color: #fdc401;
    padding: 12px 20px;
    border-radius: 3px;
    margin-bottom: -6px;
}

form.search-form {
    width: 90%;
    max-width: 100%;
    position: relative;
    padding: 0px 17px 10px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-navigation form.search-form {
    min-width: 320px;
}

input.search-field {
    height: 45px;
    padding: 0 50px 0 15px;
    width: 100%;
}

.menu-toggle {
    font-size: 8px;
    margin: 2px 0;
    display: block;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    right: 30px;
    box-shadow: none;
    border: 2px solid #3f536d;
    border-radius: 0;
    background-color: #fff !important;
}

.menu-toggle:hover,
.menu-toggle:focus {
    background-color: #3f536d;
    border: none;
}

.menu-toggle:hover span,
.menu-toggle:focus span,
.menu-toggle:hover span::after,
.menu-toggle:hover span::before,
.menu-toggle:focus span::after,
.menu-toggle:focus span::before{
    background-color: #000;
}

.menu-toggle span {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 35px;
    height: 4px;
    background-color: #3f536d;
    font-size: 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
    right: 0;
    margin: 0 auto;
}

.menu-toggle span:before,
.menu-toggle span:after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: #3f536d;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -webkit-transform 0.3s;
    -ms-transition: -webkit-transform 0.3s;
    -o-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.menu-toggle span:before {
    -webkit-transform: translateY(-250%);
    -moz-transform: translateY(-250%);
    -ms-transform: translateY(-250%);
    -o-transform: translateY(-250%);
    transform: translateY(-250%);
}

.menu-toggle span:after {
    -webkit-transform: translateY(250%);
    -moz-transform: translateY(250%);
    -ms-transform: translateY(250%);
    -o-transform: translateY(250%);
    transform: translateY(250%);
}

.menu-toggle.active span:before {
    -webkit-transform: translateY(0) rotate(45deg);
    -moz-transform: translateY(0) rotate(45deg);
    -ms-transform: translateY(0) rotate(45deg);
    -o-transform: translateY(0) rotate(45deg);
    transform: translateY(0) rotate(45deg);
}

.menu-toggle.active span:after {
    -webkit-transform: translateY(0) rotate(-45deg);
    -moz-transform: translateY(0) rotate(-45deg);
    -ms-transform: translateY(0) rotate(-45deg);
    -o-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
}

.menu-toggle.active span {
    background-color: transparent;
}

.menu-label {
    float: right;
    color: #111;
    padding: 7px 0 0 10px;
    display: none;
}
.dropdown-toggle::after{
    display: none !important;
}
button.dropdown-toggle {
      padding: 0;
    position: absolute;
    right: 0;
    top: 12%;
    left: 85%;
    transform: translate(-50%, -50%);
    padding-left: 10px;
    z-index: 10;
    background-color: transparent;
    color: #000;
    border: none;
    margin-left: 10px;
    box-shadow: none;
    width: 45px;
    height: 45px;
    line-height: 50px;
}

button.dropdown-toggle.active i,
button.dropdown-toggle.active svg {
    transform: rotate(-180deg);
    transform-origin: center;
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
    margin: 0;
    overflow: hidden;
}

.nav-links .nav-previous a:before,
.nav-links .nav-next a:after,
.nav-links .nav-previous a span:before,
.nav-links .nav-next a span:after {
    content: "\f0d9";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 10px;
    font-size: 18px;
    position: relative;
    top: 1px;
    color: #fdc401;
}

.nav-links .nav-previous a span:before{
    content: "";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 10px;
    font-size: 18px;
    position: relative;
    top: 1px;
    color: #fdc401;
}
.nav-links .nav-next a:after{
    content: "\f0da";
    margin-left: 10px;
    margin-right: 0;
}
.nav-links .nav-next a span:after {
    content: "";
    margin-left: 10px;
    margin-right: 0;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    float: left;
    /* width: 50%; */
    position: relative;
    text-align: left;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    float: right;
    text-align: right;
    /* width: 50%; */
    position: relative;
}

/*.post-navigation a,
.posts-navigation a {
    background: #C8DCEC;
    padding: 0px 10px;
    width: fit-content;
    font-weight: 400;
    display: block;
    color: #000;
    text-decoration: none;
}

.post-navigation a:hover,
.posts-navigation a:hover,
.post-navigation a:focus,
.posts-navigation a:focus {
    color: #3f536d;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.35) 0px -1px 10px;
    transition: all 0.3s ease-in-out;
}

.post-navigation,
.posts-navigation {
    padding: 0;
    position: relative;
}*/


.pagination{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}
.pagination .page-numbers,
.pagination .page-numbers.dots:hover,
.pagination .page-numbers.dots:focus {
    text-align: center;
    line-height: 35px;
    width: 35px;
    height: 35px;
    display: inline-block;
    margin-right: 5px;
    color: #fff;
    background-color: #01549a;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover,
.pagination .page-numbers:focus {
    color: #fff;
    background-color: #fdc401;
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
    margin-right: 25px;
    width: auto;
    height: auto;
    position: relative;
    top: 2px;
    background-color: transparent;
    color: #000;
}

.pagination .page-numbers.prev:hover,
.pagination .page-numbers.next:hover,
.pagination .page-numbers.prev:focus,
.pagination .page-numbers.next:focus {
    color: #111;
    background-color: transparent;
}

.pagination .page-numbers.next {
    margin-left: 18px;
    margin-right: 0;
    background-color: transparent;
}

.nav-previous span {
    padding-left: 11px;
    float: left;
    text-align: left;
}

.nav-next span {
    padding-right: 11px;
    float: right;
    text-align: right;
}

.post-navigation span,
.posts-navigation span {
    display: table;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
    /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
    outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after,
.footer-widgets-area:before,
.footer-widgets-area:after,
.wrapper:before,
.wrapper:after {
    content: "";
    display: table;
    table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after,
.footer-widgets-area:before,
.footer-widgets-area:after,
.wrapper:before,
.wrapper:after {
    clear: both;
}

/*------------------------------------------------------------
Not Found Page
--------------------------------------------------------------*/
 #main .no-results{
    text-align: center;
}
 #main .no-results form{
    width: 25%;
    max-width: 100%;
    position: relative;
    padding: 0px 17px 10px 0px;
    display: inline-block;
}
 #main .no-results form label{
    display: block;
}
 #main .no-results form .search-submit{
    height: 45px;
    line-height: 30px;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    width: 45px;
    padding: 0;
    background: #3F536D;
    color: #fff;
}
/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
    margin: 0 0 2em;
    width: 90%;
}

.widget:last-child {
    margin-bottom: 0;
}

.widget_block h1,
.widget_block h2,
.widget_block h3,
.widget_block h4,
.widget_block h5,
.widget_block h6 {
    margin: 0 0 10px;
}

#colophon .widget.widget_text,
#colophon .secondary.widget_text {
    margin-bottom: 20px;
}

#colophon .widget_block h1,
#colophon .widget_block h2,
#colophon .widget_block h3,
#colophon .widget_block h4,
#colophon .widget_block h5,
#colophon .widget_block h6 {
    color: #fff;
}

#colophon .widget:last-child {
    margin-bottom: 0;
}

#colophon .widget_block h1,
#colophon .widget_block h2,
#colophon .widget_block h3,
#colophon .widget_block h4,
#colophon .widget_block h5,
#colophon .widget_block h6 {
    color: #fff;
}

/* Widgets Start */
/*.widget_search,
.widget_recent_entries,
.widget_categories,.widget_archive,.widget_recent_comments,
.widget_tag_cloud, .widget_nav_menu, .widget_text{
    border: 1px solid;
    border-color: #01549a;*/
    /* padding: 15px; */
/*}

.widget_search,
.widget_recent_entries,
.widget_categories,.widget_archive,.widget_recent_comments,
.widget_tag_cloud, .widget_nav_menu, .widget_text{
    background-color: #fff;
}

.widget_search .search-form label{
    width: 80%;
}

.widget_search .search-form .screen-reader-text{
    display: none;
}*/

/*.widget-title,
#secondary .widget-title{
    padding: 12px 25px;*/
    /* background-image: linear-gradient(90deg, #3f536d, #3f3f3f5b); */
    /*background-color: #01549a;
    color: #fdc401;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.65px;
    line-height: 29px;
    margin: 0 0 13px;
    text-transform: uppercase;
}*/

/*.widget_search form.search-form input[type="search"] {*/
    /* padding: 0 55px 0 25px; */
   /* height: 50px;
    background-color: #fff;
    color: #000;
    border: 1px solid;
    border-color: #01549a;
    padding: 6px 17px;
    font-size: 16px;
    letter-spacing: 0.58px;
    line-height: 29px;
}

#primary ul li a,
#secondary ul li a {
    text-decoration: none;
    border-bottom: none;
    line-height: 40px;
    color: #959595;
    font-weight: 400;
    font-size: 16px;
}
 
.edit-link{
    display: none;
}*/
/* Widgets End */

/* Make sure select elements fit in widgets. */
/*.widget select {
    max-width: 100%;
    padding: 10px;
    border: none;
    width: 100%;
    max-width: 300px;
}

.widget input {
    padding: 0 15px;
    border: none;
}

form.search-form button.search-submit {
    height: 45px;
    line-height: 30px;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    width: 45px;
    padding: 0;
    background: #3F536D;
    color: #fff;
}

.widget_search form.search-form button.search-submit {
    color: #fff;
    font-size: 25px;
    line-height: 1;
    height: 50px;
    padding: 0;
    background-color: #fdc401 !important;
    width: 14%;
}

.widget_search form.search-form input[type="search"]:focus {
    border-color: #c42118;
}

form.search-form {
    position: relative;
}

form.search-form input {
    width: 100%;
    padding: 0 40px 0 15px;
    font-weight: 300;
    color: #3f536d;
    font-weight: 500;
    text-transform: uppercase;
}

#wp-calendar tbody td {
    text-align: center;
}

#wp-calendar caption {
    margin-bottom: 15px;
    font-weight: 600;
}

.widget-title {
    font-size: 18px;
    margin: 0 0 20px;
    color: #fff;
}*/
/*.widget_text input{
    padding: 10px 15px;
    border: 1px solid #002434;
    width: 80%;
    margin: 0 40px 16px;
    background-color: #fff;
}*/
/*.widget_text .textwidget .wpcf7-submit{
    background-color: #01549a;
    color: #fff;
}
.widget_text .textwidget .wpcf7-submit:hover{
    background-color: #fdc401;
    color: #fff;
}
.wpcf7-spinner{
    display: none;
}
.wpcf7 form .wpcf7-response-output{
    margin: 0.5em 0.5em 1em;
}*/
/*.widget li {
    margin-bottom: 10px;
}*/
/*.widget .menu{
    width: 96%;
    padding-left: 19px;
}
.widget .menu-services-container li,
.widget .menu-our-services-container li{
    background-color: #C8DCEC;
    position: relative;
    margin-bottom: 24px;
}*/
/*#secondary .widget .menu-services-container ul li a,
#secondary .widget .menu-our-services-container ul li a{
    color: #000 !important;
    text-transform: capitalize;
}
#secondary .widget .menu-services-container ul li a:active,
#secondary .widget .menu-our-services-container ul li a:active{
    color: #fdc401 !important;
}
#secondary .widget .menu-services-container ul li a::after,
#secondary .widget .menu-our-services-container ul li a::after{
    content: '\f101';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    position: absolute;
    right: 9px;
    background: #fff;
    color: #39494E;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 5px;
    bottom: 0;
}
#secondary .widget .menu-services-container ul li a::before,
#secondary .widget .menu-our-services-container ul li a::before{
    width: 10px;
    height: 10px;
    background-color: #01549a;
    content: '';
    transform: rotate(0deg);
    border-radius: 50%;
}*/

/*#secondary .widget .menu-projects-container ul li a:active,
#secondary .widget .menu-our-projects-container ul li a:active{
    color: #fdc401;
}*/

#primary ul li a:hover,
#secondary ul li a:hover,
#primary ul li a:focus,
#secondary ul li a:focus {
    border-bottom-color: #fff;
}

#primary .widget ul li a::before,
#secondary .widget ul li a::before,
#primary .widget ol li a::before,
#secondary .widget ol li a::before {
    display: inline-block;
    margin-left: 1em;
    /* vertical-align: .255em; */
    content: "\f124";
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    color: #fdc401;
    transform: rotate(45deg);
    margin-right: 15px;
}

#primary .widget ul li a::after,
#secondary .widget ul li a::after,
#primary .widget ol li a::after,
#secondary .widget ol li a::after{
    content: '. . . . . . . . . . . . .';
}

.widget_contact_info ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#recent-comments-2 li span a::after{
    display: none;
}
#recent-comments-2 li span a::before{
    display: inline-block !important;
}
#recent-comments-2 li a::before{
    display: none !important;
}
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
    display: block;
}

.hentry {
    margin: 0;
}

.updated:not(.published) {
    display: none;
}

.single .byline,
.group-blog .byline {
    display: inline;
}

.page-content,
.entry-content,
.entry-summary {
    margin: 0;
}

.author img {
    display: block;
    text-align: center;
    /* margin: 20px auto; */
}

.page-header span.posted-on {
    margin-bottom: 12px;
    display: inline-block;
    width: 100%;
}

.page-links {
    clear: both;
    margin: 0 0 1.5em;
}

.page-header span.author-name {
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: #111;
}

.page-header small {
    font-size: 12px;
    color: #c42118;
}

nav.navigation.pagination {
    margin-top: 50px;
    clear: both;
    display: inline-block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.posts-wrapper.col-3 article:nth-child(3n) {
    border-right: 1px solid #e4e4e4;
}

.post-categories a {
    color: #c42118;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
}

.archive-description {
    color: #fff;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.tags-links {
    margin-bottom: 20px;
    display: inline-block;
}

.tags-links span {
    margin: 0 8px 8px 0;
}
.tags-links span.fw-bold{
    color: #01549a;
}
.tags-links a {
    background: white;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 3px 0px;
    border-radius: 0;
    padding: 8px 10px;
    margin: 0px 0 8px 8px;
    text-align: center;
    position: relative;
    display: inline-block;
    transition: 0.5s;
    color: #01549a;
    transition: all 0.5s ease-in-out;
    border: none;
    font-weight: 400;
}

.tags-links a:hover,
.tags-links a:focus {
    border-color: #000;
    background-color: #fdc401;
    color: #fff;
}
.socialMedia{
    float: right;
}
.socialMedia ul li {
    display: inline-block;
    position: relative;
    margin-bottom: 0 !important;
    padding: 4px 10px !important;
    border: 1px solid;
    border-color: #3f536d;
    border-radius: 50%;
    margin-right: 10px;
    color: #fff;
    background-color: #01549a;
    transition: all ease 0.5s;
    font-size: 18px;
}
#primary .socialMedia ul li a.blgsmedia{
    font-size: 18px;
    color: #fff;
    line-height: 0;
}
.socialMedia ul li:hover{
    background-color: #fdc401;
    /* transform: scale(-20px); */
    transition: all ease 0.5s;
    transform: scale(1.1);
}

.single .date a:before,
.entry-meta .author a:before,
.comments-link a:before {
    content: "\f017";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 5px;
    color: #01549a;
}

.entry-meta .author a:before {
    content: "\f007";
}

.comments-link a:before {
    content: "\f086";
}

.single .date a:before {
    content: "\f017";
}

.cat-links a:before {
    content: "\f02c";
    font-weight: 600;
    font-family: 'Font Awesome 5 Free';
    color: #01549a;
    margin-right: 5px;
}

.entry-meta a,
.entry-meta span:before,
.entry-meta .author:before {
    color: #000;
    text-decoration: none;
    font-weight: 300;
}

.entry-meta a:hover,
.entry-meta a:focus {
    color: #3f536d;
}

/*.entry-meta {
   display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    text-decoration: none;
    border-bottom: 1px solid #00000050;
}*/

.author.vcard {
    margin-left: 5px;
}

.byline {
    visibility: hidden;
}

.byline .author.vcard {
    visibility: visible;
    margin-left: -20px;
}

.single-post .site-main .comment-navigation,
.single-post .site-main .posts-navigation,
.single-post .site-main .post-navigation {
    margin-bottom: 0;
}

.navigation.post-navigation,
.navigation.posts-navigation {
    padding: 10px;
    margin-top: 35px;
}

.post-navigation .previous-article span span,
.posts-navigation .previous-article span span,
.post-navigation .next-article span span,
.posts-navigation .next-article span span {
    display: block;
}

.post-navigation span.previous-article b,
.post-navigations span.previous-article b,
.post-navigation span.next-article b,
.post-navigations span.next-article b {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
}

.post-navigation span.previous-article,
.post-navigations span.previous-article {
    display: table;
}

/*.error-404.not-found {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}
.error404 #page-site-header{
    display: none !important;
}
.error404 .section-gap{
    padding: 9em 0;
}
.error-404.not-found .page-title {
    font-size: 38px;
}
.error-404.not-found .page-content p{
    color: #01549a;
    font-weight: 400;
}
.error-404.not-found .error-404title{
    color: #fff;
    font-size: 195px;
    text-align: center;
    display: block;
    animation: effect linear 1900ms infinite;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 240px;
}
@keyframes effect{
    0%{
        text-shadow: 4px -4px 0 #01549A, 3px -3px 0 #01549A,
                    2px -2px 0 #01549A, 1px -1px 0 #01549A,
                    -4px 4px 0 #01549A, -3px 3px 0 #01549A,
                    -2px 2px 0 #01549A, -1px 1px 0 #01549A;
    }
    25%{
        text-shadow: -4px -4px 0 #01549A, -3px -3px 0 #01549A,
                    -2px -2px 0 #01549A, -1px -1px 0 #01549A,
                    4px 4px 0 #01549A, 3px 3px 0 #01549A,
                    2px 2px 0 #01549A, 1px 1px 0 #01549A;
    }
    50%{
        text-shadow: -4px 4px 0 #01549a, -3px 3px 0 #01549a,
                    -2px 2px 0 #01549a, -1px 1px 0 #01549a,
                     4px -4px 0 #01549a, 3px -3px 0 #01549a,
                      2px -2px 0 #01549a, 1px -1px 0 #01549a;
    }
    75% {
        text-shadow:
            4px 4px 0 #01549a, 3px 3px 0 #01549a,
            2px 2px 0 #01549a, 1px 1px 0 #01549a,
            -4px -4px 0 #01549a, -3px -3px 0 #01549a,
            -2px -2px 0 #01549a, -1px -1px 0 #01549a;
    }

    100% {
        text-shadow:
            4px -4px 0 #01549a, 3px -3px 0 #01549a,
            2px -2px 0 #01549a, 1px -1px 0 #01549a,
            -4px 4px 0 #01549a, -3px 3px 0 #01549a,
            -2px 2px 0 #01549a, -1px 1px 0 #01549a;
    }
}
.page404 .site-main{
    padding-top: 15%;
}*/
/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
    word-wrap: break-word;
}

.bypostauthor {
    display: block;
}

/*#reply-title,
.comments-title {
    font-size: 42px;
    margin: 0;
}

.comments-title,
#reply-title {
    margin-bottom: 30px;
    font-size: 32px;
    font-weight: 600;
    color: #0a2540;
}*/

#cancel-comment-reply-link {
    float: right;
}

ul.post-categories li:after {
    content: ",";
}

ul.post-categories li:last-child:after {
    display: none;
}

ol.comment-list {
    padding: 0;
    margin: 0 0 30px;
    list-style: none;
}

#comments ol {
    list-style: none;
    margin-left: 0;
    padding: 0;
}

#comments ol.comment-list {
    padding-top: 35px;
    position: relative;
    overflow: hidden;
}

#comments ol.children {
    margin-left: 120px;
}

.says {
    display: none;
}

.comment-meta img {
    width: 60px;
    height: 60px;
    float: left;
    margin-right: 20px;
}

#comments time:before {
    display: none;
}

.comment-body {
    position: relative;
}

.reply {
    text-align: right;
}

#comments article {
    margin-bottom: 30px;
    clear: both;
    padding: 30px;
    background-color: #f6f6f6;
    text-decoration: none;
    /* border-radius: 25px; */
    border: 1px solid #01549a;
}

#comments ol.comment-list>li {
    padding-top: 49px;
}

#comments ol.comment-list>li:first-child {
    padding-top: 0;
}

#comments ol.comment-list>li article:last-child .reply {
    border-bottom: none;
    padding-bottom: 0;
}

.reply a {
    color: #000;
    display: inline-block;
    font-weight: 400;
    padding: 7px 30px;
    position: relative;
    background-color: #C8DCEC;
    border: 2px solid #C8DCEC;
    border-radius: 50px;
    text-decoration: none;
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.reply a:hover,
.reply a:focus {
    color: #000;
    background-color: #fdc401;
    border-color: #fdc401;
}

.comment-meta .url,
.comment-meta .fn {
    display: inline-block;
    color: #01549a;
    font-size: 25px;
    text-decoration: none;
    text-transform: capitalize;
}

.comment-meta .url:hover,
.comment-meta .url:focus {
    color: #fdc401;
}

.comment-metadata a,
.comment-metadata a time {
    color: #01549a;
    text-decoration: none;
}

.comment-metadata a:hover,
.comment-metadata a:focus,
.comment-metadata a:hover time,
.comment-metadata a:focus time {
    color: #000;
}

.comment-metadata time {
    font-weight: 500;
}

.comment-metadata {
    display: block;
    margin-bottom: 15px;
}

.comment-content {
    margin-bottom: 10px;
    margin-top: 0;
    padding-left: 80px;
}

.comment-content p {
    font-weight: 400;
    margin-bottom: 1em;
    color: #A1A1A1;
    font-size: 16px;
    line-height: 1.6;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
/* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer {
    /* Theme Footer (when set to scrolling) */
    display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
    display: block;
}

/*--------------------------------------------------------------
# Layouts and titles
--------------------------------------------------------------*/

section {
    position: relative;
    overflow: hidden;
}

.title-section {
    /* text-align: center; */
    margin-bottom: 3em;
    display: flex;
    /* align-items: center; */
    position: relative;
    z-index: 2;
}

.title-section h1 {
    margin: 0;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: 1px;
    color: #000000;
    border-radius: 0px;
}

.entry-content {
    margin-top: 0;
    position: relative;
    z-index: 1;
}

/*.main-navigation ul.nav-menu>li:last-child {
    /* box-shadow: 0px 0px 10px -5px #7b7b7b; */
    /*padding: 3px 10px;
    background-color: #01549a;
}*/ 

.wrapper {
    width: 100%;/*width change 90%-100%*/
    max-width: 1430px;
    margin: 0 auto;
    /*padding-left: 15px;*/
}

/*.section-gap {
    padding: 5em 0;
}*/

.entry-title,
.section-title {
    font-size: 22px;
    margin: 0 0 6px;
    font-weight: 700;
    word-wrap: break-word;
}

.section-title {
    font-size: 32px;
    margin: 0 0 15px;
    color: #000;
}

.section-subtitle {
    max-width: 600px;
    margin: 0 auto;
}

.entry-title a {
    color: #000;
    text-decoration: none;
    font-size: 33px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.entry-title a:hover,
.entry-title a:focus {
    color: #c42118;
}

.post-thumbnail-link {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

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

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

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

.btn {
    color: #fff;
    display: inline-block;
    font-weight: 600;
    padding: 8px 25px;
    border-radius: 7px;
    font-size: 21px;
    position: relative;
    text-decoration: none;
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.btn:hover,
.btn:focus {
    color: #fff;
    background-color: #000;
    border-color: #000;
}

.btn i {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.featured-image {
    position: relative;
}

.col-1 article,
.col-2 article,
.col-3 article,
.col-4 article,
.col-5 article,
.col-6 article {
    margin-bottom: 30px;
    width: 100%;
}

.col-1 article:last-child,
.col-2 article:last-child,
.col-3 article:last-child,
.col-4 article:last-child,
.col-5 article:last-child,
.col-6 article:last-child {
    margin-bottom: 0;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
    max-width: 100%;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}

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

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.type_of_work {
    margin: -4px;
}

.type_of_work-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
    padding: 4px;
}

.type_of_work-columns-2 .type_of_work-item {
    max-width: 50%;
}

.type_of_work-columns-3 .type_of_work-item {
    max-width: 33.33%;
}

.type_of_work-columns-4 .type_of_work-item {
    max-width: 25%;
}

.type_of_work-columns-5 .type_of_work-item {
    max-width: 20%;
}

.type_of_work-columns-6 .type_of_work-item {
    max-width: 16.66%;
}

.type_of_work-columns-7 .type_of_work-item {
    max-width: 14.28%;
}

.type_of_work-columns-8 .type_of_work-item {
    max-width: 12.5%;
}

.type_of_work-columns-9 .type_of_work-item {
    max-width: 11.11%;
}

.type_of_work-caption {
    display: block;
}

/*--------------------------------------------------------------
## Social Icons
--------------------------------------------------------------*/
.social-icons li {
    display: inline-block;
    height: auto;
    text-align: center;
    position: relative;
    list-style: none;
}

/*.footer-widgets-area .widget .social-icons li {
    display: inline-block;
    width: auto;
}*/

.social-icons li:not(:last-child) {
    margin-right: 5px;
}

.social-icons,
.social-icons ul {
    margin: 0;
    padding: 0;
}

.social-icons li a {
    background-color: transparent;
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: block;
}

/*--------------------------------------------------------------
## Social Icons
--------------------------------------------------------------*/
ul.social-icons {
    margin: 0;
    padding: 0;
}

.social-icons li {
    width: 40px;
    height: auto;
    text-align: center;
    line-height: 40px;
    position: relative;
    list-style: none;
}

.social-icons ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.social-icons li:not(:last-child) {
    margin-right: 10px;
}

.social-icons li a {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    color: #fff;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-family: "Font Awesome 5 Brands";
}

.social-icons li a:hover,
.social-icons li a:focus {
    color: #fff;
    background-color: #FF3366;
}

.social-icons li a:before {
    content: "\f1d0";
}

.social-icons li a[href*="facebook.com"]:before,
.social-icons li a[href*="fb.com"]:before {
    content: "\f39e";
}

.social-icons li a[href*="twitter.com"]:before {
    content: "\e61b";
}

.social-icons li a[href*="linkedin.com"]:before {
    content: "\f0e1";
}

.social-icons li a[href*="plus.google.com"]:before {
    content: "\f0d5";
}

.social-icons li a[href*="youtube.com"]:before {
    content: "\f167";
}

.social-icons li a[href*="dribbble.com"]:before {
    content: "\f17d";
}

.social-icons li a[href*="pinterest.com"]:before {
    content: "\f231";
}

.social-icons li a[href*="bitbucket.org"]:before {
    content: "\f171";
}

.social-icons li a[href*="github.com"]:before {
    content: "\f113";
}

.social-icons li a[href*="codepen.io"]:before {
    content: "\f1cb";
}

.social-icons li a[href*="flickr.com"]:before {
    content: "\f16e";
}

.social-icons li a[href$="/feed/"]:before {
    content: "\f09e";
}

.social-icons li a[href*="foursquare.com"]:before {
    content: "\f180";
}

.social-icons li a[href*="instagram.com"]:before {
    content: "\f16d";
}

.social-icons li a[href*="tumblr.com"]:before {
    content: "\f173";
}

.social-icons li a[href*="reddit.com"]:before {
    content: "\f1a1";
}

.social-icons li a[href*="vimeo.com"]:before {
    content: "\f194";
}

.social-icons li a[href*="digg.com"]:before {
    content: "\f1a6";
}

.social-icons li a[href*="twitch.tv"]:before {
    content: "\f1e8";
}

.social-icons li a[href*="stumbleupon.com"]:before {
    content: "\f1a4";
}

.social-icons li a[href*="delicious.com"]:before {
    content: "\f1a5";
}

.social-icons li a[href*="mailto:"]:before {
    content: "\f0e0";
}

.social-icons li a[href*="soundcloud.com"]:before {
    content: "\f1be";
}

.social-icons li a[href*="wordpress.org"]:before {
    content: "\f19a";
}

.social-icons li a[href*="wordpress.com"]:before {
    content: "\f19a";
}

.social-icons li a[href*="jsfiddle.net"]:before {
    content: "\f1cc";
}

.social-icons li a[href*="tripadvisor.com"]:before {
    content: "\f262";
}

.social-icons li a[href*="foursquare.com"]:before {
    content: "\f180";
}

.social-icons li a[href*="angel.co"]:before {
    content: "\f209";
}

.social-icons li a[href*="slack.com"]:before {
    content: "\f198";
}

.social-icons li a[href*="tiktok.com"]:before {
    content: "\e07b";
}

/*--------------------------------------------------------------
## Social Icons Hover Color
--------------------------------------------------------------*/
.social-icons li a[href*="facebook.com"]:hover,
.social-icons li a[href*="fb.com"]:hover,
.social-icons li a[href*="facebook.com"]:focus,
.social-icons li a[href*="fb.com"]:focus {
    background-color: #3c5798 !important;
}

.social-icons li a[href*="twitter.com"]:hover,
.social-icons li a[href*="twitter.com"]:focus {
    background-color: #1ea0f1 !important;
}

.social-icons li a[href*="linkedin.com"]:hover,
.social-icons li a[href*="linkedin.com"]:focus {
    background-color: #0077B5 !important;
}

.social-icons li a[href*="plus.google.com"]:hover,
.social-icons li a[href*="plus.google.com"]:focus {
    background-color: #ec7161 !important;
}

.social-icons li a[href*="youtube.com"]:hover,
.social-icons li a[href*="youtube.com"]:focus {
    background-color: #cc181e !important;
}

.social-icons li a[href*="dribbble.com"]:hover,
.social-icons li a[href*="dribbble.com"]:focus {
    background-color: #f4a09c !important;
}

.social-icons li a[href*="pinterest.com"]:hover,
.social-icons li a[href*="pinterest.com"]:focus {
    background-color: #bd081b !important;
}

.social-icons li a[href*="bitbucket.org"]:hover,
.social-icons li a[href*="bitbucket.org"]:focus {
    background-color: #205081 !important;
}

.social-icons li a[href*="github.com"]:hover,
.social-icons li a[href*="github.com"]:focus {
    background-color: #323131 !important;
}

.social-icons li a[href*="codepen.io"]:hover,
.social-icons li a[href*="codepen.io"]:focus {
    background-color: #111000 !important;
}

.social-icons li a[href*="flickr.com"]:hover,
.social-icons li a[href*="flickr.com"]:focus {
    background-color: #025FDF !important;
}

.social-icons li a[href$="/feed/"]:hover,
.social-icons li a[href$="/feed/"]:focus {
    background-color: #089DE3 !important;
}

.social-icons li a[href*="foursquare.com"]:hover,
.social-icons li a[href*="foursquare.com"]:focus {
    background-color: #F94877 !important;
}

.social-icons li a[href*="instagram.com"]:hover,
.social-icons li a[href*="instagram.com"]:focus {
    background-color: #cd42e7 !important;
}

.social-icons li a[href*="tumblr.com"]:hover,
.social-icons li a[href*="tumblr.com"]:focus {
    background-color: #56BC8A !important;
}

.social-icons li a[href*="reddit.com"]:hover,
.social-icons li a[href*="reddit.com"]:focus {
    background-color: #FF4500 !important;
}

.social-icons li a[href*="vimeo.com"]:hover,
.social-icons li a[href*="vimeo.com"]:focus {
    background-color: #00ADEF !important;
}

.social-icons li a[href*="digg.com"]:hover,
.social-icons li a[href*="digg.com"]:focus {
    background-color: #00ADEF !important;
}

.social-icons li a[href*="twitch.tv"]:hover,
.social-icons li a[href*="twitch.tv"]:focus {
    background-color: #0E9DD9 !important;
}

.social-icons li a[href*="stumbleupon.com"]:hover,
.social-icons li a[href*="stumbleupon.com"]:focus {
    background-color: #EB4924 !important;
}

.social-icons li a[href*="delicious.com"]:hover,
.social-icons li a[href*="delicious.com"]:focus {
    background-color: #0076E8 !important;
}

.social-icons li a[href*="mailto:"]:hover,
.social-icons li a[href*="mailto:"]:focus {
    background-color: #4169E1 !important;
}

.social-icons li a[href*="soundcloud.com"]:hover,
.social-icons li a[href*="soundcloud.com"]:focus {
    background-color: #FF5500 !important;
}

.social-icons li a[href*="wordpress.org"]:hover,
.social-icons li a[href*="wordpress.org"]:focus {
    background-color: #0073AA !important;
}

.social-icons li a[href*="wordpress.com"]:hover,
.social-icons li a[href*="wordpress.com"]:focus {
    background-color: #00AADC !important;
}

.social-icons li a[href*="jsfiddle.net"]:hover,
.social-icons li a[href*="jsfiddle.net"]:focus {
    background-color: #396AB1 !important;
}

.social-icons li a[href*="tripadvisor.com"]:hover,
.social-icons li a[href*="tripadvisor.com"]:focus {
    background-color: #FFE090 !important;
}

.social-icons li a[href*="angel.co"]:hover,
.social-icons li a[href*="angel.co"]:focus {
    background-color: #111000 !important;
}

.social-icons li a[href*="tiktok.com"]:hover,
.social-icons li a[href*="tiktok.com"]:focus {
    background-color: #7d88e3 !important;
}

/*--------------------------------------------------------------
#  Inner Page settings
--------------------------------------------------------------*/
 /*#main .entry-content h1 {
    font-size: 55px;
    clear: both;
    color: #000;
    margin: 16px 0;
    line-height: 1.3;
    font-weight: 700;
}
 #main .entry-content p strong{
    color: #000;
}
 #main .entry-content p em{
    color: #FF5B4A;
}*/
 /*#main .entry-content h2 {
    font-size: 46px;
    clear: both;
    color: #000;
    margin: 16px 0;
    line-height: 1.3;
    font-weight: 700;
}*/

 /*#main .entry-content h3 {
    font-size: 38px;
    clear: both;
    color: #000;
    margin: 16px 0;
    line-height: 1.3;
    font-weight: 700;
     letter-spacing: 0.59px; 
}*/

 /*#main .entry-content h4 {
    font-size: 30px;
    clear: both;
    color: #000;
    margin: 16px 0;
    line-height: 1.3;
    font-weight: 700;
}*/

 #main .entry-content h5 {
    font-size: 26px;
    clear: both;
    color: #000;
    margin: 16px 0;
    line-height: 1.3;
    font-weight: 700;
}

 #main .entry-content h6 {
    font-size: 22px;
    clear: both;
    color: #000;
    margin: 16px 0;
    line-height: 1.3;
    font-weight: 700;
}

#main .entry-content ul {
    /* padding: 20px 0 20px 0; */
    list-style: none;
    font-size: 18px;
    margin: 0;
}

/*#main .entry-content ul li,
#main .entry-content ul li ul li {
    line-height: 50px;
    font-size: 18px;
    color: #000;
}*/

/*#main .entry-content ul li:before {
    content: '\f124';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    margin-right: 20px;
    transform: scale(1);
    transition: all 0.5s ease 0s;
    color: #fdc401;
    display: inline-block;
    font-size: 14px; 
    font-weight: bold;
    padding: 2px;
    line-height: 1;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    transform: rotate(45deg);
    z-index: 1;
}*/

details{
    line-height: 2rem;
}

details p{
    margin-left: 30px;
}

.tagcloud {
    padding: 10px 8px;
}

.tagcloud a{
    color: #959595 !important;
}

#main .entry-content ul li ul {
    margin: 15px 0 0 25px;
}

#main .entry-content ul li ul li:before {
    content: "\f124";
    font-family: 'Fontawesome';
    margin-right: 10px;
    transform: scale(1);
    transition: all 0.5s ease 0s;
    color: #fdc401;
    display: inline-block;
    transform: scale(1);
    transition: all 0.5s ease 0s;
    font-size: 14px;
    transform: rotate(45deg);
}

#main .entry-content ol {
    counter-reset: li;
    list-style: none;
    /* *list-style: decimal; */
    margin: 30px 0 0;
}

#main .entry-content ol li {
    position: relative;
    padding-left: 6rem;
    min-height: 50px;
    padding-top: 0px;
    line-height: 30px;
    font-size: 18px;
    color: #000;
}

#main .entry-content ol li:before {
    content: counter(li);
    counter-increment: li;
    color: #fff;
    background: #01549a;
    border: 1px solid #a1a1a1;
    /* border-radius: 50%; */
    font-size: 16px;
    width: 30px;
    height: 30px;
    line-height: 29px;
    text-align: center;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 3rem;

}

/*blockquote .wp-block-quote,
.wp-block-pullquote,
.wp-block-quote,
.wp-block-quote:not(.is-large):not(.is-style-large) {
     border-left: none !important; 
    padding: 1em !important;
    background-color: #01549a !important;
    border: 1px solid !important;
    border-color: #002434 !important;
    width: 70%; 
    margin-top: 50px;
}

.wp-block-quote h1,
.wp-block-quote h2,
.wp-block-quote h3,
.wp-block-quote h4,
.wp-block-quote h5,
.wp-block-quote h6{
    text-align: center;
    font-size: 25px !important;
    font-weight: bold !important;
    margin:0px 0px 20px;
}

blockquote .wp-block-quote p,
.wp-block-pullquote p,
.wp-block-quote p {
    color: #fff !important;
    font-size: 16px;
    font-weight: 300;
     text-align: left; 
    padding: 12px 40px 0;
    letter-spacing: 0.64px;
    line-height: 30px;
}

.wp-block-quote p:before,
blockquote .wp-block-quote p:before {
    content: "\f10d";
    position: absolute;
    top: -1rem;
    left: 1.5rem;
    font-size: 60px;
    color: #fdc401;
    font-family: 'FontAwesome';
}

.wp-block-quote p:after,
blockquote .wp-block-quote p:after {
    content: "\f10e";
    position: absolute;
    bottom: -1rem;
    right: 33px;
    font-size: 60px;
    color: #fdc401;
    font-family: 'FontAwesome';
    transform: rotate(180deg) rotateY(180deg);
}*/

/*--------------------------------------------------------------
#  Page Site Header
--------------------------------------------------------------*/
/*#page-site-header {
    background-size: cover;
    position: relative;
    text-align: center;
    background-repeat: no-repeat;
    background-image: url(assets/images/people-railway-transport-portrait-public-transport-streetphotography-583586-pxhere1.com.png);
}*/
#page-site-header {
position: relative;
overflow: hidden;
background-size: cover;
background-position:center;
background-repeat:no-repeat;
}

.page-title{
    font-size: 30px;
    color: #3f536d;
    font-weight: bold;
    margin-bottom: 10px;
}

#page-site-header .innerheader-overly1{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background: linear-gradient(
90deg,
rgba(20,55,150,0.9) 0%,
rgba(10,110,160,0.9) 100%
);

z-index:1;
}

#page-site-header .page-site-headerimg {
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    background-size: cover;
}

#page-site-header .page-title {
    color: #fff;
    font-size: 30px;
    /*margin: 0 0 7px -96px;*/
    font-weight: 300;
    text-align: left;
}

#page-site-header .page-header {
    position: absolute;
    /*bottom: 26%;*/ 
    left: 0;
    right: 0;
    /*top: 6rem*/;
    text-align: center;
    margin: 0 auto;
    z-index: 1;
}

#page-site-header .header-title {
    position: relative;
}

/*#page-site-header .header-title .headerdotsbox {
    width: 36px;
    height: 55px;
    position: absolute;
    left: 110px;
    bottom: 0px;
}*/

#page-site-header .header-title .headerdotsbox div {
    background: #a1a1a1;
    margin: 0 5px 5px 0;
    /* font-family: 'FontAwesome'; */
    border-radius: 50%;
    width: 7px;
    height: 7px;
    float: left;

}

/*--------------------------------------------------------------
## Breadcrumb
--------------------------------------------------------------*/

/*#page-site-header .breadcrumbbox {
    padding: 0px 0 0.5em 0%;
    text-align: left;
     margin-bottom: 8%; 
}

#page-site-header .breadcrumbbox .button {
    display: inline-block;
    background-color: #fff; 
    padding: 20px 22px;
    border-radius: 50px;
    text-decoration: none;
}*/
#page-site-header .breadcrumbbox .button .root,
#page-site-header .breadcrumbbox span{
    /*padding: 10px 17px;*/
    font-size: 16px;
    font-weight: 500;
    color: #ff6a00 !important;
}

#page-site-header .breadcrumbbox .button .root::before{
    content: '\e3af';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    color: #fff;
    padding-right: 5px;
}

.breadcrumbbox span.treeEnd-margin{
    margin-left: -36px;
}

#page-site-header .breadcrumbbox span.treeEnd {
    /*background-color: #FFF;*/
    color: #01549a;
    /* margin: 0 3px; */
    font-size: 16px;
    font-weight: 500;
    padding: 10px 0px;
    line-height: 30px;
    /* margin-left: -53px; */
}

#page-site-header .breadcrumbbox span.bread-arrow {
    font-size: 28px ;
    /* line-height: 13px; */
    position: relative;
    top: -3px;
    padding: 0px;
    color: #01549A;
    background-color: #00000000;
    font-weight: 400;
    left: -16px;
}

#page-site-header .breadcrumbbox span.spanarrow{
    font-size: 35px !important;
    padding: 0px 10px !important;
}

#page-site-header .breadcrumbbox a {
    /* color: #01549a; */
    font-weight: 500;
    text-decoration: none;
    font-size: 16px;
    line-height: 25px;
    text-transform: uppercase;
}

#page-site-header .breadcrumbbox a:hover ,
#page-site-header .breadcrumbbox .treeEnd:hover{
    color: #a1a1a1;
    text-decoration: none;
    cursor: pointer;
}

/*--------------------------------------------------------------
#  Breadcrumb List
--------------------------------------------------------------*/
#breadcrumb-list {
    background-color: #222;
    padding: 20px 0;
}

.trail-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.trail-items li {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
}

.trail-items li a {
    color: rgba(255, 255, 255, 0.30);
}

.trail-items li a:hover,
.trail-items li a:focus {
    color: #fff;
}

.trail-items .separator {
    color: rgba(255, 255, 255, 0.30);
    padding: 0 2px;
}

/*--------------------------------------------------------------
# Slick Slider Global
--------------------------------------------------------------*/

.slick-slide {
    outline: none;
}

.slick-dotted.slick-slider {
    margin: 0;
}

/* ===== Arrows Global ===== */

.slick-prev,
.slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #EFF8FF;
    z-index: 10;
    cursor: pointer;
    border: none;
}

.slick-prev {
    left: 30px;
}

.slick-next {
    right: 30px;
}

.slick-prev:before,
.slick-next:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 20px;
    color: #01549A;
    opacity: 1;
}

.slick-prev:before {
    content: "\f053";
}

.slick-next:before {
    content: "\f054";
}

.slick-prev:hover,
.slick-next:hover {
    background: #01549A;
}

.slick-prev:hover:before,
.slick-next:hover:before {
    color: #fff;
}

/* ===== Dots ===== */

/* ===============================
   CUSTOM DOTS BELOW BUTTONS
=================================*/

/* Move dots inside left text area */
#featured-slider .slick-dots{
    position: absolute;
    bottom: 30px;      /* text ke neeche adjust karein */
    left: 8%;          /* left text padding ke hisaab se adjust karein */

    width: 45%;        /* sirf left column jitni width */
    display: flex !important;
    justify-content: flex-start;
    gap:10px;
}

#featured-slider .slick-dots li{
    width: auto;
    height: auto;
    margin: 0;
}

#featured-slider .slick-dots li button{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    transition: all 0.3s ease;
}

#featured-slider .slick-dots li.slick-active button{
    width: 35px;             /* 👈 long shape */
    height: 12px;
    border-radius: 20px;
    background: #ff5500;
}


.slick-dots li button:before {
    display: none;
}

/*=====================================
  FEATURED SLIDER COMPLETE DESIGN
=====================================*/

#featured-slider {
    position: relative;
    background: linear-gradient(135deg,#2b3dbd,#0c6aa6);
    padding: 100px 0 100px;
    overflow: hidden;
}

/* Flex Layout */
#featured-slider .slide-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 650px;
}

/* LEFT CONTENT */
#featured-slider .row {
    width: 55%;
}

#featured-slider .section-content{
    position: relative;
}
/* Small Title */
.slider-small-title {
    color: #ff6a00;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: inline-block;
}

/* MAIN TITLE (2 lines controlled width) */
#featured-slider h2.title {
    font-size: 54px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    max-width: 650px;
    margin-bottom: 20px;
}

/* Paragraph 2 line control */
#featured-slider .entry-content p {
    font-size: 20px;
    line-height: 30px;
    max-width: 600px;
    color: #fff;
    margin-bottom: 30px;
}

/* BUTTON WRAPPER */
#featured-slider .d-flex {
    display: flex;
    gap: 20px;
}

/* BUTTON 1 */
#featured-slider .read-more .btn {
    padding: 14px 35px;
    background: #ffffff;
    color: #01549A;
    border-radius: 40px;
    font-weight: 600;
    transition: all .3s ease;
}

/* BUTTON 2 */
#featured-slider .playbtntxt,
#featured-slider .d-flex a:not(.btn) {
    padding: 14px 35px;
    background: #ff6a00;
    color: #fff;
    border-radius: 40px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
    display: flex;
}

/* Hover Effect */
#featured-slider .read-more .btn:hover,
#featured-slider .playbtntxt:hover{
    transform: scale(1.08);
}


/* ===== Custom Blob Shape Image ===== */
.slider-wrapper{
    position: relative;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 4 / 3;
    margin: 0 auto;
}

.slider-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #fb923c, #f97316);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    transform: scale(1.05);
}

.slider-circle {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    border: 4px solid #fb923c;
}

.slider-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ===================================
   SLIDER LEFT DECORATIVE CIRCLES
===================================*/

.entry-container{
    position: relative;
}

/* Common Circle Style */
.slider-shape{
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 2px solid rgba(255, 255, 255, 0.3); 
    backdrop-filter: blur(2px);
    animation: floatMove 6s ease-in-out infinite;
}

/* Small Circle (near small title) */
.shape-one{
    width: 80px;
    height: 80px;
    top: -20px;
    right: 120px;
}

/* Big Circle (below paragraph right side) */
.shape-two{
    width: 80px;
    height: 80px;
    top: 200px;   /* 👈 paragraph ke niche adjust karo */
    right: 60px;
    animation-delay: 2s;
}


/* Floating Animation */
@keyframes floatMove{
    0%{ transform: translateY(0px); }
    50%{ transform: translateY(-15px); }
    100%{ transform: translateY(0px); }
}


/* Slick Arrows (Inside Circle Feel) */
#featured-slider .slick-prev,
#featured-slider .slick-next {
    position:absolute;
    width: 60px;
    height: 60px;
    background: #ffffff;
    border-radius: 50%;
    z-index: 99;
    top: 50%;
    transform: translateY(-50%);
}

#featured-slider .slick-prev {
    left: 58%;
}

#featured-slider .slick-next {
    right: 8% ;
}

#featured-slider .slick-prev:before,
#featured-slider .slick-next:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #0c6aa6;
    font-size: 18px;
}

#featured-slider .slick-prev:before { content: "\f053"; }
#featured-slider .slick-next:before { content: "\f054"; }

#featured-slider .slick-prev:hover,
#featured-slider .slick-next:hover {
    background:#ff8a00;
}

#featured-slider .slick-prev:hover:before,
#featured-slider .slick-next:hover:before {
    color:#fff;
}
/* Flex Layout FIX */
#featured-slider .slide-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 550px;
}

/* TEXT LEFT */
#featured-slider .row {
    width: 55%;
    order: 1;   /* 👈 text first */
}

/* IMAGE RIGHT */
#featured-slider .sliderimg {
    width: 45%;
    display: flex;
    justify-content: center;
    order: 2;   /* 👈 image right side */
    position: relative;
}

/* ===============================
   SLIDER BOTTOM CURVE
=================================*/

#featured-slider{
    position: relative;
    overflow: hidden;
}

/* Curve Container */
.slider-bottom-curve{
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    line-height: 0;
}

/* SVG */
.slider-bottom-curve svg{
    display: block;
    width: 100%;
    height: 100px;
}

/* Curve ke neeche thin line */
.slider-bottom-curve::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:2px;
    background:#e5e5e5; /* line color change kar sakti hain */
}
/* ======================================
   MOBILE DEVICES (ALL PHONES)
====================================== */
@media (max-width: 767px){

    /* Stack layout */
    #featured-slider .slide-inner{
        flex-direction: column;
        text-align: center;
        min-height: auto;
    }

    /* TEXT FULL WIDTH */
    #featured-slider .row{
        width: 100%;
        order: 1;
        padding: 0 20px;
    }

    /* IMAGE BELOW TEXT */
    #featured-slider .sliderimg{
        width: 100%;
        order: 2;
        margin-top: 40px;
    }

    /* Titles Responsive */
    #featured-slider h2.title{
        font-size: 30px;
        line-height: 38px;
    }

    #featured-slider .entry-content p{
        font-size: 16px;
        line-height: 24px;
    }

    /* Buttons Center */
    #featured-slider .d-flex{
        justify-content: center;
        flex-wrap: nowrap;
        gap:15px;
    }

    #featured-slider .read-more .btn,
    #featured-slider .playbtntxt{
        padding: 12px 22px;
        font-size: 14px;
        white-space: nowrap;
    }

    /* DOTS BELOW BUTTONS */
    #featured-slider .slick-dots{
        position: relative;
        left: 0;
        width: 100%;
        justify-content: center;
        margin-top: 25px;
    }

    /* Image Blob Smaller */
    .slider-wrapper{
        max-width: 320px;
    }

    /* ARROWS INSIDE IMAGE */
    #featured-slider .slick-prev{
        top:480px;
        left: 5%;
    }

    #featured-slider .slick-next{
        right: 5%;
        top:480px;
    }

    #featured-slider .slick-prev,
    #featured-slider .slick-next{
        width: 45px;
        height: 45px;
    }
}

/* ======================================
   LARGE TABLETS / SMALL LAPTOPS
====================================== */
@media (min-width:1025px) and (max-width:1400px){

    #featured-slider .row{
        width: 50%;
    }

    #featured-slider .sliderimg{
        width: 50%;
    }

    #featured-slider h2.title{
        font-size: 44px;
    }

    .slider-wrapper{
        max-width: 480px;
    }

    /* Keep arrows inside image */
    #featured-slider .slick-prev{
        /*left: 58%;*/
        display: none;
    }

    #featured-slider .slick-next{
        /*right: 8%;*/
        display: none;
    }
}
/* =====================================
   MOBILE IMAGE STACK FIX
===================================== */
@media (max-width: 767px){

    /* Proper stacking */
    #featured-slider .slide-inner{
        flex-direction: column !important;
        position: relative;
    }

    /* TEXT FIRST */
    #featured-slider .row{
        width: 100% !important;
        order: 1 !important;
        position: relative;
        z-index: 2;
    }

    /* IMAGE BELOW TEXT */
    #featured-slider .sliderimg{
        width: 100% !important;
        order: 2 !important;
        position: relative;
        z-index: 1;
        margin-top: 40px;
        display: flex;
        justify-content: center;
    }

    /* Make sure wrapper does not overflow */
    .slider-wrapper{
        max-width: 320px;
        width: 100%;
        margin: 0 auto;
    }

    /* Prevent absolute overlap */
    #featured-slider .slider-bg{
        z-index: 0;
    }

    #featured-slider .slider-circle{
        position: relative;
        z-index: 2;
    }

}
/* Mobile Fix */
@media (max-width:767px){

    .shape-one{
        top: -10px;
        right: 40px;
    }

    .shape-two{
        top: 180px;
        right: 20px;
    }
}
@media (max-width:767px){
    #featured-slider .d-flex{
        /*flex-wrap: wrap;*/
        justify-content: center;
    }
}
@media (max-width:767px){

    #featured-slider .slick-dots{
        margin-top: 35px;
    }

    #featured-slider .sliderimg{
        margin-bottom: 20px;
    }
}
/* ======================================
   iPhone SE Only (320px devices)
====================================== */
@media (max-width: 375px){

    #featured-slider .d-flex{
        justify-content: left;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    #featured-slider .read-more .btn,
    #featured-slider .playbtntxt{
        width: 100%;
        text-align: center;
    }
}
/* iPhone 414px devices */
@media only screen 
and (min-width: 376px) 
and (max-width: 430px){

    #featured-slider .slide-inner{
        flex-direction: column !important;
    }

    #featured-slider .row{
        width: 100% !important;
        order: 1;
    }

    #featured-slider .sliderimg{
        width: 100% !important;
        order: 2;
        margin-top: 40px;
    }
    /* Keep arrows inside image */
    #featured-slider .slick-prev{
        display: none;
    }

    #featured-slider .slick-next{
        display: none;
    }
}
/* Surface Pro 7 */
@media only screen 
and (min-width: 768px) 
and (max-width: 1024px){

    #featured-slider .slide-inner{
        flex-direction: column !important;
        text-align: center;
    }

    #featured-slider .row{
        width: 100% !important;
        order: 1;
    }

    #featured-slider .sliderimg{
        width: 100% !important;
        order: 2;
        margin-top: 50px;
        justify-content: center;
    }
    /* Keep arrows inside image */
    #featured-slider .slick-prev{
        display: none;
    }

    #featured-slider .slick-next{
        display: none;
    }
}


/*--------------------------------------------------------------
#  Featured Services Section
--------------------------------------------------------------*/
/*#featured-services {
    position: relative;
    overflow: hidden;
}

#featured-services .featured-services-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#featured-services .servicerightside {
    position: relative
}

#featured-services .title-section {
    margin-bottom: 4em;
    display: block;
}

#featured-services .entry-content3 h5 {
    position: relative;
    font-size: 40px;
    margin: 0px 0px 0px 0px;
    color: #01549a;
    font-weight: bold;
    letter-spacing: 1.20px;
}
#featured-services .entry-content3 h5::before{
    content: '';
    display: inline-block;
    width: 36px; 
    height: 100px; 
    background-image: url('assets/images/flower.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px; 
    vertical-align: middle; 
    position: relative;
    left: 20px;
}

#featured-services .featured-service-item {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 13px;
     margin: 0 10px; 
    transition: 0.5s;
}

#featured-services .featured-service-item:hover .entry-content .serv-icon i,
#featured-services .featured-service-item:hover .entry-content .serv-icon svg {
    color: #085208;
}

#featured-services .entry-container {
    background: #FFFFFF;
    border-radius: 10px;
    margin: 0 0 2px;
}

#featured-services .entry-container .service-image{
    position: relative;
    height: 392px;
    background-color: #fff;
    color:#fff;
    overflow: hidden;
}

#featured-services .entry-content {
    text-align: left;
    margin: 0 auto;
    height: auto;
    background-color: #000;
    position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
   padding: 10px 0; 
  -webkit-transform: translateY(80%);
          transform: translateY(80%);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: opacity 0.1s 0.3s, -webkit-transform 0.4s;
  transition: opacity 0.1s 0.3s, -webkit-transform 0.4s;
  transition: transform 0.4s, opacity 0.1s 0.3s;
  transition: transform 0.4s, opacity 0.1s 0.3s, -webkit-transform 0.4s;
}

#featured-services .entry-container .service-image:hover .entry-content{
    opacity: .8;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  -webkit-transition: opacity 0.1s, -webkit-transform 0.4s;
  transition: opacity 0.1s, -webkit-transform 0.4s;
  transition: transform 0.4s, opacity 0.1s;
  transition: transform 0.4s, opacity 0.1s, -webkit-transform 0.4s;
  text-align: center;
}

#featured-services .entry-container .service-image:hover .entry-content h2{
    font-size: 20px;
    text-transform: uppercase;
    margin-top: 80px;
    opacity: 1;
}

#featured-services .entry-container .service-image:hover .entry-content h2 a{
    font-size: 20px;
}

#featured-services .entry-container .service-image:hover .entry-content p{
    color: #fff;
    font-size: 16px;
    letter-spacing: 0.53px;
    padding: 0 5px;
    opacity: 1;
}

#featured-services .entry-container .service-image:hover .entry-content .newsCaption-link{
    color: #fdc401;
    font-size: 16px;
    opacity: 1;
}

#featured-services .entry-container .service-image:hover .entry-content .newsCaption-link::after{
    content: '\f061';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    margin-left: 7px;
    font-size: 16px;
}

#featured-services .entry-content .serv-icon i,
#featured-services .entry-content .serv-icon svg {
    font-size: 19px;
    line-height: 61px;
    color: #000;
    padding: 10px;
}

#featured-services .entry-content p {
    color: #000000;
    line-height: 23px;
    font-size: 15px;
    margin-bottom: 1em;
    margin-top: 10px;
    font-weight: 300;
}

#featured-services .entry-content h2.entry-title {
    margin: 24px 0 0;
}

#featured-services .entry-title a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    text-transform: capitalize;
    letter-spacing: normal;
    font-weight: 400;
    padding: 0px 18px 0px 18px;
    line-height: 30px;
}

#featured-services .entry-title a::after{
    content: '\f061';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    float: right;
    height: 36px;
    width: 38px;
    background-color: #fff;
    color: #000;
    margin-right: 10px;
     padding: 10px 12px; 
    font-size: 19px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#featured-services .entry-container .service-image:hover .entry-title a::after{
    display: none;
}*/

/*--------------------------------------------------------------
#  Inner Services Page css
--------------------------------------------------------------*/

/*#main .service-inner-content,
#secondary .service-inner-content {
    position: relative;
    overflow: hidden;
}

#main .gap-12{
    gap: 0 !important;
}

#main .service-inner-content .featured-service-item,
#secondary .service-inner-content .featured-service-item {
    background: #ffffff;
    padding: 15px 13px 4px;
    margin: 0 0px;
    width: 100%;
}

#main .service-inner-content .entry-title .service-title,
#secondary .service-inner-content .entry-title .service-title {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    text-transform: capitalize;
    letter-spacing: normal;
    font-weight: 500;
    padding: 0 18px;
    line-height: 30px;
}
#main .service-inner-content .entry-title .service-title:active,
#secondary .service-inner-content .entry-title .service-title:active{
    color: #fdc401;
}
#secondary .service-inner-content .entry-title a,
#main .service-inner-content .entry-title a{
    font-size: 0;
}

#main .service-inner-content .entry-title .service-title::after,
#secondary .service-inner-content .entry-title .service-title::after{
    content: '\f061';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    float: right;
    height: 36px;
    width: 38px;
    background-color: #fff;
    color: #000;
    margin-right: 10px;
     padding: 10px 12px; 
    font-size: 19px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#main .service-inner-content .content-image:hover .service-title::after,
#secondary .service-inner-content .content-image:hover .service-title::after{
    display: none;
}

#secondary .service-inner-content .content-image:hover .entry-content .newsCaption-link,
#main .service-inner-content .content-image:hover .entry-content .newsCaption-link{
    color: #fdc401;
    font-size: 16px;
    opacity: 1;
}

#main .service-inner-content .content-image:hover .entry-content .newsCaption-link::after,
#secondary .service-inner-content .content-image:hover .entry-content .newsCaption-link::after{
    content: '\f061';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    margin-left: 7px;
    font-size: 16px;
}

#main .service-inner-content p,
#secondary .service-inner-content p{
    color: #000000;
    line-height: 23px;
    font-size: 15px;
    margin-bottom: 1em;
    margin-top: 10px;
    font-weight: 300;
    opacity: 0;
}

#main .service-inner-content .content-image,
#secondary .service-inner-content .content-image {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 392px;
    color: #fff;
    background-color: #fff;
}

#main .service-inner-content .content-image:hover .entry-content,
#secondary .service-inner-content .content-image:hover .entry-content{
    opacity: .8;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: opacity 0.1s, -webkit-transform 0.4s;
    transition: opacity 0.1s, -webkit-transform 0.4s;
    transition: transform 0.4s, opacity 0.1s;
    transition: transform 0.4s, opacity 0.1s, -webkit-transform 0.4s;
    text-align: center;
}

#main .service-inner-content .content-image .entry-content,
#secondary .service-inner-content .content-image .entry-content{
    text-align: left;
    margin: 0 auto;
    height: auto;
    background-color: #000;
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    padding: 10px 0;
    -webkit-transform: translateY(80%);
    transform: translateY(80%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: opacity 0.1s 0.3s, -webkit-transform 0.4s;
    transition: opacity 0.1s 0.3s, -webkit-transform 0.4s;
    transition: transform 0.4s, opacity 0.1s 0.3s;
    transition: transform 0.4s, opacity 0.1s 0.3s, -webkit-transform 0.4s;
}

#main .service-inner-content .content-image img,
#secondary .service-inner-content .content-image img {
    height: auto;
    width: 100%;
    transition: transform .5s ease;
}

#main .service-inner-content .content-image .entry-title,
#secondary .service-inner-content .content-image .entry-title{
    margin: 15px 0;
    font-size: 18px;
}

#main .service-inner-content .content-image:hover .entry-content h2,
#secondary .service-inner-content .content-image:hover .entry-content h2{
    font-size: 20px;
    text-transform: uppercase;
    margin-top: 80px;
    opacity: 1;
}

#main .service-inner-content .content-image:hover .entry-content h2 a,
#secondary .service-inner-content .content-image:hover .entry-content h2 a{
    font-size: 20px;
}

#main .service-inner-content .content-image:hover .entry-content p,
#secondary .service-inner-content .content-image:hover .entry-content p{
    color: #fff;
    font-size: 16px;
    letter-spacing: 0.53px;
    padding: 0 5px;
    opacity: 1;
}*/

/*--------------------------------------------------------------
#  Featured About Section
--------------------------------------------------------------*/
/*#featured-about {
    position: relative;
    overflow: hidden;
}

#featured-about .featured-about-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#featured-slider .featured-slider-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#featured-about .title-section {
    position: relative;
    text-align: center;
    padding-right: 10%;
    display: block !important;
     margin-bottom: 0; 
}

#featured-about .title-section h5 {
    color: #000000;
    font-size: 20px !important;
    font-weight: 500 !important;
    position: relative !important;
    letter-spacing: 0.66px;
}
#featured-about .title-section h5::after{
    content: '';
    display: inline-block;
    width: 29px; 
    height: 32px; 
    background-image: url('assets/images/flower.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px; 
    vertical-align: middle; 
    position: relative;
    transform: rotateY(180deg);
    left: -6px;
    top: -20px;
}
#content #featured-about .title-section {
    padding: 0 !important;
}
#featured-about .title-section h1 {
    margin: 16px auto;
    font-size: 48px !important;
    font-weight: 700 !important;
    padding: 0 0px;
    position: relative;
    z-index: 1;
    border-left: none;
    letter-spacing: 0.58px;
    color: #000000;
}

#featured-about h2.subtitle {
    line-height: 27px;
    color: #707070 !important;
    margin: 0px 8% 30px 0;
    font-size: 16px !important;
    font-weight: normal !important;
    position: relative;
    letter-spacing: 0.54px;
}

#featured-about .title-section .about-service p{
    color: #000 !important;
    font-size: 16px !important;
    letter-spacing: 0.53px;
    font-weight: 400 !important;
    margin: 19px auto;
}

#featured-about .title-section .about-service i,
#featured-about .title-section .about-service svg{
    color: #fdc401;
    margin-right: 12px;
}

#featured-about .title-section .cleaning-text{
    margin-top: 34px;
    gap: 45px;
}

#featured-about .title-section .cleaning-text p{
    color: #000;
    font-size: 18px !important;
    letter-spacing: 0.59px;
    margin: 0;
}
#featured-about .featureimg{
    width: 35px;
    height: 35px;
}
#featured-about .abtfeature1{
    color: #000;
    font-size: 18px !important;
}
#featured-about .section-area-textlist {
    font-size: 26px !important;
    line-height: 32px;
    font-weight: 300;
    margin: 29px 0;
    padding: 0 232px 0 25px;
    text-align: left;
    position: relative;
}

#featured-about .button-content {
    display: inline-block;
    font-weight: 400;
    padding: 10px 20px;
    font-size: 18px;
    text-transform: uppercase;
    background: #01549A;
    text-decoration: none;
    border-radius: 0;
    border: 1px solid;
    border-color: #01549a;
    letter-spacing: 1px;
    color: #ffffff;
    transition: all 0.4s ease-in;
    position: relative;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
}
#featured-about .button-content::before{
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
    top: 100%;
    width: 140%;
    height: 180%;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
}
#featured-about .button-content::after{
    content: "";
    position: absolute;
    left: 55%;
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
    top: 180%;
    width: 160%;
    height: 190%;
    background: #E9F5FF;
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
}
#featured-about .button-content:hover:before{
    top: -35%;
    background: #E9F5FF;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}
#featured-about .button-content:hover::after{
    top: -45%;
    background: #E9F5FF;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}
#featured-about .button-content:active{
    transform: scale(0.9);
}
#featured-about .button-content:hover{
    color: #01549A;
    animation: pulseBig infinite 3s linear;
}

#featured-about .title-section {
    position: relative;
}
#featured-about .button-content a {
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.56px;
}
#featured-about .button-content:hover a{
    color: #01549a;
}
#featured-about .title-section .row h3 {
    font-size: 25px !important;
    font-weight: 500;
    color: #000000;
}

#featured-about .title-section .row p {
    padding: 12px 0px 20px 0px;
    font-size: 18px !important;
    font-weight: 400;
}

#featured-about .title-section .row i,
#featured-about .title-section .row svg {
    color: #0A9642;
    font-size: 24px !important;
    padding: 9px;
    border: 2px solid #0A9642;
    border-radius: 10px;
    margin: 0px 0px 0px 20px;
}

#featured-about .button-content i,
#featured-about .button-content svg {
    font-size: 17px !important;
    margin-left: 5px;
}
#featured-about .button-content:hover i,
#featured-about .button-content:hover svg{
    color: #01549a;
}
#featured-about .about-image {
    width: 100%;
    height: 544px;
    padding: 10px;
    position: relative;
}

#featured-about .image-box1::after{
    background-color: #8458cb;
    position: absolute;
    content: "";
    width: 103px;
    height: 100px;
    right: -7px;
    bottom: 186px;
}

#featured-about .image-box2::before{
    background-color: #53dbb8;
    position: absolute;
    content: "";
    width: 103px;
    height: 100px;
    left: -5px;
    bottom: -27px;
}

#featured-about .about-image img {
    height: 544px;
    width: 442px;
    position: relative;
    z-index: 2;
}

#featured-about .image-top-box{
    width: 250px;
    height: 91px;
    background-color: #01549a;
    text-align: center;
    position: absolute;
    top: -2rem;
    left: -7rem;
    z-index: 3;
    padding: 10px;
    transform: translatey(0px);
	animation: float 4s ease-in-out infinite;
}
@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-10px);
	}
	100% {
		transform: translatey(0px);
	}
}

#featured-about .image-top-box .top-box-num{
    font-size: 28px !important;
    color: #fdc401;
    letter-spacing: 0.92px;
    font-weight: bold;
    margin: 0;
}

#featured-about .image-top-box .top-box-text{
    font-size: 17px !important;
    color: #fff;
    letter-spacing: 0.53px;
    font-weight: 300;
      margin: 0;
}

#featured-about .aboutrightside{
    margin-left: 2.5rem;
}

#featured-about .image-bottom-box{
    width: 198px;
    height: 91px;
    background-color: #f8f3e0;
    display: flex;
    text-align: center;
    position: absolute;
    z-index: 3;
    bottom: 36px;
    left: 421px;
    border: 1px solid #fdc401;
    position: relative;
}

#featured-about .image-bottom-box .bottom-box-icon{
    width: 46px;
    height: 46px;
    background-color: #fdc401;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 24px;
    top: 20px;
}

#featured-about .image-bottom-box .bottom-box-icon i, 
#featured-about .image-bottom-box .bottom-box-icon svg{
    color: #01549a;
}

#featured-about .image-bottom-box .bottom-box-text{
    position: absolute;
    left: 88px;
    top: 20px;
}

#featured-about .image-bottom-box .bottom-box-text a{
    font-size: 18px !important;
    letter-spacing: 0.59px;
    color: #fdc401;
}

#featured-about .image-bottom-box .bottom-box-text a span{
    font-size: 16px !important;
    letter-spacing: 0.53px;
    color: #01549a;
}

#featured-about .aboutimgtext .d-flex {
    gap: 30px;
    font-size: 20px !important;
    font-weight: bold;
}

#featured-about .aboutimgtext .aboutimgbg {
    background: #FFFFFF;
    padding: 20px 30px;
    border-radius: 20px;
}

#featured-about .aboutimgtext .aboutimgbg h5 {
    font-size: 18px !important;
    font-weight: 500;
    line-height: 26px;
    color: #000000;
}

#featured-about .aboutimgtext {
    position: absolute;
    bottom: 8%;
    width: 100%;
}

#featured-about .about-service{
    margin-bottom: 32px;
}*/

/*--------------------------------------------------------------
#  Featured projects Section
--------------------------------------------------------------*/
/*#featured-projects {
    position: relative;
    overflow: hidden;
    padding: 5% 5% 0;
}

#featured-projects .projectrow {
    z-index: 2;
    position: relative;
}

#featured-projects .featured-projects-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

 #featured-projects .project-overly1 {
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    opacity: 1;
    z-index: 0;
} 

#featured-projects .title-section {
    margin-bottom: 4em;
    display: block;
}

#featured-projects .entry-content3 h5 {
    font-size: 40px;
    margin: 0px 0px 1.3rem 0px;
    position: relative;
    color: #01549A;
    font-weight: 700;
}
#featured-projects .entry-content3 h5::before{
    content: '';
    display: inline-block;
    width: 35px;
    height: 97px; 
    background-image: url('assets/images/flower.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px; 
    vertical-align: middle; 
    position: relative;
    left: 20px;
}

#featured-projects .project-image {
    position: relative;
}

#featured-projects .project-image .image-container{
    height: 588px;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#featured-projects .project-image .image-container:nth-child(2){
    position: relative;
}*/

/**********************************************/
/*#featured-projects .gallery .gallery-img {
    grid-area: 1/1;
    width: 50%; 
    cursor: pointer;
    transition: .4s .1s;
}

#featured-projects .gallery .gallery-img:first-child,
#featured-projects .gallery .gallery-img:last-child {
    clip-path: none;
}

#featured-projects .gallery {
    display: flex; 
    gap: 4px; 
}

#featured-projects .gallery .gallery-img:first-child:hover,
#featured-projects .gallery .gallery-img:first-child:hover .gallery-img:last-child{
    width: 100%;
}

#featured-projects .gallery .gallery-img:last-child:hover,
#featured-projects .gallery .gallery-img:last-child:hover .gallery-img:first-child{
    width: 100%;
}

#featured-projects h1.title-section {
    margin: 24px 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0px;
    color: #fff;
    padding: 0 0px;
    text-align: left;
    line-height: 2.7rem;
}

#featured-projects .entry-content3 p.text-section {
    position: relative;
    font-size: 22px;
    line-height: 39px;
    color: #fff;
    margin: 0 0 10px;
    font-weight: 400;
    padding: 0 85px 0 0;
}

#featured-projects .featured-project-item {
    margin: 0 12px;
    transition: 0.5s;
    position: relative;
}

#featured-projects .entry-content {
    text-align: left;
    margin: 0 auto;
    padding: 20px 20px;
    height: auto;
    position: absolute;
    bottom: 0;
}

#featured-projects .entry-content .entry-title{
    background: #01549a;
    padding: 18px 35px;
    left: -7.4rem;
     right: 0; 
    position: absolute;
    bottom: 7rem;
    width: 300px;
    transform: rotateZ(270deg);
    margin: 0 7px 15px;
    transition: ease-in 0.4s;
}
#featured-projects .entry-container:hover .entry-content .entry-title{
    transform: rotate(360deg);
    left: 0;
    bottom: 0;
    transition: ease-in 0.4s;
} 
 #featured-projects:nth-child(3) article .entry-container:hover .entry-content .entry-title{
    transform: rotate(360deg);
    left: 0;
    bottom: 0;
    transition: ease-in 0.4s;
} 
#featured-projects .entry-content .entry-text{
    transform: rotateZ(0deg);
    bottom: 0;
    left: 0px;
    width: 298px;
}
#featured-projects .entry-content .entry-text a{
    color: #fff;
    text-decoration: none;
    font-size: 25px;
    text-transform: capitalize;
    letter-spacing: 1.59px;
    font-weight: normal;
}
#featured-projects .entry-content .entry-text p{
    font-size: 15px;
    color: #fdc401;
    font-weight: 400;
    letter-spacing: 0.59px;
}
#featured-projects .entry-title a {
    color: #fff;
    text-decoration: none;
    font-size: 25px;
    text-transform: capitalize;
    letter-spacing: 1.39px;
    font-weight: normal;
}

#featured-projects .gallery a{
    display: grid;
}*/

/*--------------------------------------------------------------
#  Inner Page Project 
--------------------------------------------------------------*/


 /*#main .entry-content h4.projects-heading{
    font-size: 40px;
    font-weight: 700;
    color: #01549A;
    letter-spacing: 1.32px;
    line-height: 60px;
     margin-bottom: 3rem; 
    margin: 0 0 0rem;
}
#main .entry-content .projects-heading::before{
    content: '';
    display: inline-block;
    width: 35px; 
    height: 100px; 
    background-image: url('assets/images/flower.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px; 
    vertical-align: middle; 
    position: relative;
    left: 20px;
}

#main .projectmainbox,
#secondary .projectmainbox {
    position: relative;
    overflow: hidden;
}

#main .project-inner-content .project-image,
#secondary .project-inner-content .project-image{
    width: 95%;
}

#main .project-inner-content .project-image,
#secondary .project-inner-content .project-image {
    position: relative;
    overflow: hidden;
    height: auto;
}

#main .project-inner-content .gallery,
#secondary .project-inner-content .gallery{
    display: flex; 
    gap: 4px; 
    overflow: hidden;
    border: 1px solid;
    border-color: #000;
}

#main .project-inner-content .img-responsive:nth-child(2),
#secondary .project-inner-content .img-responsive:nth-child(2){
    position: relative;
     background-size: 120%; 
}

#main .project-inner-content .gallery-img,
#secondary .project-inner-content .gallery-img{
    flex: 1; 
    transition: flex-grow 0.4s ease;
    cursor: pointer;
    overflow: hidden; 
}

#main .project-inner-content .gallery-img:first-child,
#secondary .project-inner-content .gallery-img:first-child{
    clip-path: none;
}

#main .project-inner-content .gallery .gallery-img:first-child:hover,
#secondary .project-inner-content .gallery .gallery-img:first-child:hover,
#main .project-inner-content .gallery .gallery-img:first-child:hover .gallery-img:nth-child(2),
#secondary .project-inner-content .gallery .gallery-img:first-child:hover .gallery-img:nth-child(2){
     width: 90%; 
    flex-grow: 2;
}

#main .project-inner-content .gallery .gallery-img:nth-child(2):hover,
#secondary .project-inner-content .gallery .gallery-img:nth-child(2):hover,
#main .project-inner-content .gallery .gallery-img:nth-child(2):hover .gallery-img:first-child,
#secondary .project-inner-content .gallery .gallery-img:nth-child(2):hover .gallery-img:first-child:hover{
    flex-grow: 2;
}

#main .project-inner-content .project-info,
#secondary .project-inner-content .project-info {
    position: absolute;
    z-index: 1;
    bottom: 15px;
    left: 16px;
    right: 16px;
    transition: .6s ease;
    padding: 10px 27px;
    border: none !important;
    background-color: #01549a;
}

#main .project-inner-content .project-info h5,
#secondary .project-inner-content .project-info h5,
#main .project-inner-content .project-info h1,
#secondary .project-inner-content .project-info h1{
    margin: 10px 0 4px;
}

#main .project-inner-content:hover .project-info h1 a,
#secondary .project-inner-content:hover .project-info h1 a {
    color: #fdc401;
}
 #main .project-inner-content .project-info h1,
#secondary .project-inner-content .project-info h1 {
    font-size: 22px;
}
#main .project-inner-content .project-info h1 a,
#secondary .project-inner-content .project-info h1 a  {
    font-weight: 500;
    font-size: 22px;
    color: #fff;
    margin-bottom: 0;
     padding: 0 0em 8px 0; 
    text-decoration: none !important;
    letter-spacing: 0.73px;
    line-height: 28px;
}
#main .project-inner-content .project-info h1 a:active,
#secondary .project-inner-content .project-info h1 a:active{
    color: #fdc401;
}
 #main .project-inner-content .project-info h5,
#secondary .project-inner-content .project-info h5 {
    font-size: 14px;
    color: #fdc401;
    padding: 0px 0px;
    font-weight: 400 !important;
    letter-spacing: 0.46px;
    line-height: 26px;
    margin-top: 0;
}*/

/*--------------------------------------------------------------
#  Featured Expert team Section
--------------------------------------------------------------*/
/*#featured-team {
    position: relative;
    overflow: hidden;
}

#featured-team .featured-team-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#featured-team .title-section {
    display: inline-block;
    margin-bottom: 0em;
    margin-top: 0em;
    position: relative;
}

#featured-team .title-section h1 {
    margin: 0 0 45px 0; 
    font-size: 40px;
    line-height: 40px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #01549a;
     padding: 0 17px; 
    position: relative;
}
#featured-team .title-section h1::after{
    content: '';
    display: inline-block;
    width: 35px; 
    height: 100px; 
    background-image: url('assets/images/flower.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px; 
    vertical-align: middle; 
    position: relative;
    left: -20px;
    transform: rotateY(180deg);
}
#featured-team .contentbox h3 {
    font-size: 14px;
    color: #030303;
    font-weight: 400;
    letter-spacing: 0.28px;
    margin: 0 0 13px;
}

#featured-team .image-container {
    height: 308px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: all .7s linear;
}
#featured-team .content-image {
    border-radius: 0px;
    display: block;
    position: relative;
    border: 1px solid;
    border-color: #707070;
    width: 90%;
}

#featured-team .imagediv {
    position: relative;
    z-index: 1;
}

#featured-team .content-image .social-links {
    padding: 57px 73px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: #01549a;
    opacity: 0.6;
    transition: .8s ease;
    border-radius: 145px 0 0 0;
}

#featured-team .content-image .social-links .twitter{
    position: absolute;
    right: 11px;
    top: 11px;
}

#featured-team .content-image .social-links .facebook{
    position: absolute;
    left: 32px;
    bottom: 7px;
}

#featured-team .content-image .social-links .instagram{
    position: absolute;
    left: 3.8rem;
    top: 1.8rem;
}

#featured-team .content-image .social-links a i,
#featured-team .content-image .social-links a svg {
    color: #fff;
    font-size: 22px;
    margin-right: 5px;
    position: relative;
    z-index: 1;
    padding: 6px 0;
}

#featured-team .content-image .social-links a:before {
    display: none;
}

#featured-team .content-image .social-links a:hover i,
#featured-team .content-image .social-links a:hover svg {
    transition: .6s ease;
    transform: scale(1.7);
    color: #FAA919;
}

#featured-team h2.entry-title {
    margin: 13px 0 6px;
    padding: 0 0px;
    position: relative;
}

#featured-team .entry-content{
    overflow: hidden;
    background-color: #fff;
}
#featured-team .entry-content::before{
    content: "";
    width: 100%;
    height: 100%;
     background: #3f536d; 
    background-color: #fdc401;
    position: absolute;
    top: -100%;
    left: 0;
    transition: all 0.3s ease-out 0s;
}

#featured-team .featured-team-item:hover .entry-content::before{
    top: 0;
}

#featured-team h2.entry-title a {
    color: #030303;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.36px;
}

#featured-team .featured-team-item:hover h2.entry-title a{
    color: #fff;
}
#featured-team .featured-team-item:hover .contentbox h3{
    color: #fff;
}
#featured-team .contentbox{
    position:relative;
    z-index: 5;
}*/
/*--------------------------------------------------------------
#  Inner team Page
--------------------------------------------------------------*/

/*#main .team-inner-content {
    position: relative;
    overflow: hidden;
}

#main .team-inner-content .content-image{
    border: 1px solid;
    border-color: #707070;
    border-radius: 0;
    position: relative;
    display: block;
}

#main .team-inner-content .entry-content{
    position: relative;
    overflow: hidden;
    background: #FFFFFF;
    padding: 0 15px 10px;
    width: 100%;
}

#main .team-inner-content .contentbox {
    position: relative;
    z-index: 5;
    margin-bottom: 5px;
}

#main .team-inner-content .content-image img {
    width: 100%;
    height: 308px;
}

#main .team-inner-content h2.entry-title a {
    color: #030303;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.36px;
    line-height: 27px;
    cursor: default;
}

#main .team-inner-content .entry-content h3{
    color: #404040;
}

#main .team-inner-content .entry-content h2{
    margin: 13px 0 4px;
    font-size: 18px;
}

#main .team-inner-content .entry-content h3 {
    font-size: 15px;
    color: #030303;
    font-weight: 400;
    letter-spacing: 0.28px;
    line-height: 1.3;
}

#main .team-inner-content .social-links {
    padding: 57px 73px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: #01549a;
    opacity: 0.6;
    transition: .8s ease;
    border-radius: 145px 0 0 0;
}

.gap-4{
    gap: 1rem;
}

#main .team-inner-content .social-links .instagram{
    position: absolute;
    left: 3.8rem;
    top: 1.8rem;
}

#main .team-inner-content .social-links .facebook{
    position: absolute;
    left: 32px;
    bottom: 7px;
}

#main .team-inner-content .social-links .twitter{
    position: absolute;
    right: 11px;
    top: 11px;
}

#main .team-inner-content .social-links a svg,
#main .team-inner-content .social-links a i{
    color: #fff;
    font-size: 22px;
    margin-right: 5px;
    z-index: 1;
    padding: 6px 0;
}
#main .team-inner-content .social-links a:hover svg,
#main .team-inner-content .social-links a:hover i{
    transition: .6s ease;
    transform: scale(1.7);
    color: #FAA919;
}
#main .team-inner-content .entry-content:before{
    content: "";
    width: 100%;
    height: 100%;
    background-color: #fdc401;
    position: absolute;
    top: -100%;
    left: 0;
    transition: all 0.3s ease-out 0s;
}
#main .team-inner-content:hover .entry-content:before{
    top: 0;
}

#main .team-inner-content .social-links a:before {
    display: none;
}

#main .team-inner-content:hover h2.entry-title a,
#main .team-inner-content:hover h3{
    color: #fff !important;
}*/

/*--------------------------------------------------------------
#  Featured Features Section
--------------------------------------------------------------*/
/*#featured-features {
    position: relative;
    overflow: hidden;
}

#featured-features .image-container {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
}

#featured-features .feature-img{
    margin-left: 4%;
    position: relative;
    width: 85%;
}

#featured-features .feature-img img{
    height: 657px;
    width: 100%;
}

#featured-features .entry-content{
    position: absolute;
    top: 20%;
    padding: 30px 50px;
    text-align: center;
}

#featured-features .entry-content h2{
    color: #fff;
    transform: translateY(-100%) scale(0);
    transition: .5s;
    font-size: 40px;
    margin: 46% 0 0px 40px;
    letter-spacing: 1.32px;
    font-weight: bold;
}
#featured-features .entry-content h2::after{
    content: '';
    display: inline-block;
    width: 36px;
    height: 100px;
    background-image: url(assets/images/flower2.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px;
    vertical-align: middle;
    position: relative;
    left: -5px;
    transform: rotateY(180deg);
}
#featured-features .entry-content a{
    color: #01549a;
    transform:scale(2);
    transition: .5s;
    opacity: 0;
    background-color: #fdc401;
    padding: 10px 20px;
    font-size: 17px;
    letter-spacing: 0.56px;
    text-transform: uppercase;
}

#featured-features .entry-content a::after{
    content: '\f061';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    margin-left: 5px;
    font-size: 17px;
}

#featured-features .feature-img .entry-content{
    background-color: #000;
    opacity: 0.8;
    z-index: 2;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: 0.4s ease;
}

#featured-features .feature-img .entry-content h2{
    transform: translateY(0%) scale(1);
}

#featured-features .feature-img .entry-content a{
    transform: scale(1);
    opacity: 1;
}

#featured-features .section-content {
    padding: 0px;
    margin-left: -30px;
}

#featured-features .featured-features-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#featured-features .title-section {
    display: inline-block;
    margin: 0 0 17px;
}

#featured-features h3 {
    font-size: 24px;
    font-weight: bold;
    color: #101010;
    z-index: 1;
}

#featured-features .featuresbox .features-icon{
    font-size: 54px;
    color: #fdc401;
    position: relative;
    z-index: 1;
    left: 6px;
}

#featured-features .featuresbox .circle{
    position: absolute;
    background: #eff8ff;
    width: 79px;
    z-index: 0;
    height: 79px;
    border-radius: 50%;
    opacity: 0.9;
    top: 0;
    left: 0;
}

#featured-features .featuresbox .features-icon i, 
#featured-features .featuresbox .features-icon svg{
    margin: 0 0 14px 18px;
    z-index: 2;
}

#featured-features .title-section h1 {
    font-size: 28px;
    font-weight: 500;
    color: #1D3176;
    border: none;
    position: relative;
}

#featured-features .title-section h1::after {
    content: "";
    width: 161px;
    height: 1px;
    background: #1D3176;
    position: absolute;
    bottom: 0px;
    margin-left: 0px;
}

#featured-features p.section-text {
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    text-align: center;
    margin: 0 0 65px;
}

#featured-features .features-block {
    padding: 31px 25px 17px;
    position: relative;
    border: 1px solid;
    border-color: #01549a;
    transition: 0.4s ease-in;
}
#featured-features .features-block::before{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: #021338;
    content: "";
    z-index: 0;
    transition: all 0.5s ease-in-out 0s;
    transform-style: preserve-3d;
    transform: perspective(1200px) rotateX(-30deg) translateZ(0px);
    opacity: 0;
}
#featured-features .features-block:first-child{
    background-color: #021338;
    z-index: 0;
}

#featured-features .features-block:hover::before{
    opacity: 1;
    transform: perspective(1200px) rotateX(0deg) translateZ(0px);
    transition-delay: 0.1s;
}

#featured-features .features-block:hover .features-title a{
    color: #fff;
}

#featured-features .features-block:hover .features-details p{
    color: #fff;
}

#featured-features .features-block:last-child:after {
    display: none;
}

#featured-features .featuresbox {
    border-radius: 8px;
    padding: 20px 0;
    position: relative;
}

#featured-features h4.features-title {
    margin: 20px 0;
}

#featured-features h4.features-title a {
    color: #000;
    text-decoration: none;
    font-weight: 500;
    font-size: 18px;
    transition: color 0.3s ease;
    letter-spacing: 0.59px;
    text-align: left !important;
}
#featured-features .features-block:first-child h4.features-title a{
    color: #fff;
}
#featured-features .features-details p{
    font-size: 16px;
    color: #707070;
    letter-spacing: 1.53px;
    text-align: left;
}
#featured-features .features-block:first-child .features-details p{
    color: #fff;
}

#featured-features .featuretextcontainer:hover h4.features-title a {
    color: #FAA919;
}*/

/*--------------------------------------------------------------
# Features Inner page Section
--------------------------------------------------------------*/

/*#main .features-inner-content {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 12px;
    padding: 2em 1em;
    text-align: center;
    height: 100%;
    transition: all 0.4s ease-in-out;
    background-color: #fff;
}

#main .features-inner-content:hover {
    background-color: #c42118;
    border: 1px solid #b81919;
}

#main .features-inner-content:nth-child(3n) {
    background-color: #c42118;
    border: 1px solid #b81919;
}

#main .features-inner-content:nth-child(3n) h4.features-title a,
#main .features-inner-content:nth-child(3n) .features-details p {
    color: #fff;
}

#main .features-inner-content:nth-child(3n) a i {
    color: #f18d88;
}

#main .box-left-brdr {
    width: 3px;
    height: 11em;
    position: absolute;
    left: -14px;
    top: 5em;
    background: #c42118;

}

#main .features-inner-content h4.features-title {
    margin: 20px;
}

#main .features-inner-content h4.features-title a {
    color: #000;
    text-decoration: none;
    font-weight: 500;
    font-size: 20px;
}

#main .features-inner-content .features-details p {
    font-size: 18px;
    color: #000;
}

#main .features-inner-content a i {
    color: #c42118;
    font-size: 60px;
}

#main .features-inner-content:hover h4.features-title a,
#main .features-inner-content:hover .features-details p {
    color: #fff;
}

#main .features-inner-content:hover a i {
    color: #f18d88;
}*/

/*--------------------------------------------------------------
#  Featured Our Steps Section
--------------------------------------------------------------*/
/*#featured-steps{
    position: relative;
    overflow: hidden;
    background-color: #f3f3f3;
}

#featured-steps .featured-steps-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#featured-steps .entry-content3{
    margin-top: 52px;
}

#featured-steps .entry-content3 h5{
    font-size: 40px;
    color: #01549a;
    letter-spacing: 1.32px;
    font-weight: bold;
    margin-bottom: 40px;
    position: relative;
}
#featured-steps .entry-content3 h5::before{
    content: '';
    display: inline-block;
    width: 32px; 
    height: 100px; 
    background-image: url('assets/images/flower.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px; 
    vertical-align: middle; 
    position: relative;
    left: 20px;
}

#featured-steps .section-content .steps-block{
    width: 100%;
    background-color: #fff;
    margin-top: 30px;
    margin-bottom: 38px;
    padding: 0 8px 35px;
    transition: all ease-in-out 0.5s;
}
#featured-steps .section-content .steps-block:hover{
    box-shadow: 0 26px 0 -13px #fff, 0 44px 0 -22px #fff;
    transition: all ease-in-out 0.5s;
    transform: translateY(-20px);
}

#featured-steps .section-content .steps-block:nth-child(2):hover{
    box-shadow: 0 26px 0 -13px #fff, 0 44px 0 -22px #fff;
}

#featured-steps .section-content .steps-block:nth-child(2) .steps-icon{
    width: 150px;
    height: 150px;
    font-size: 50px;
}

#featured-steps .section-content .steps-block .steps-icon{
    color: #fdc401;
    font-size: 45px;
    bottom: 4rem;
    position: relative;
    background-color: #fff;
    width: 127px;
    height: 128px;
    border: 10px solid;
    border-color: #f3f3f3;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#featured-steps .section-content .steps-block h4 a{
    color: #000;
    font-size: 24px;
    letter-spacing: 0.79px;
    font-weight: 500;
    text-transform: capitalize;
}
#featured-steps .section-content .steps-block:hover h4 a{
    color: #fdc401;
}
#featured-steps .section-content .steps-block .stepsbox{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#featured-steps .section-content .steps-block .stepsbox .steps-title{
    position: relative;
    top: 0rem;
    left: 0px;
    margin-top: 20px;
}

#featured-steps .section-content .steps-block .stepsbox .steps-text{
    font-size: 17px;
    color: #707070;
    letter-spacing: 0.51px;
    padding: 19px 24px;
}

#featured-steps .section-content .steps-block .stepsbox .steps-no {
    color: #01549a;
    font-size: 30px;
    letter-spacing: 0.99px;
    font-weight: 700;
    position: relative;
}

#featured-steps .stepsbox .steps-no::before{
    content: '';
    width: 13%;
    height: 27%;
    position: absolute;
    border-bottom: 3px solid;
    border-bottom-color: #01549a;
    border-left: 3px solid;
    border-left-color: #01549a;
    bottom: 0;
    left: -1rem;
    color: linear-gradient(270deg, #01549a 15%, #01549A2E 50%);
}

#featured-steps .stepsbox .steps-no::after{
    content: '';
    width: 13%;
    height: 27%;
    position: absolute;
    border-top: 3px solid;
    border-top-color: #01549a;
    border-right: 3px solid;
    border-right-color: #01549a;
    bottom: 2rem;
}*/

/*--------------------------------------------------------------
#  Featured Faqs Section
--------------------------------------------------------------*/

/*#featured-faqs{
    position: relative;
    overflow: hidden;
}

#featured-faqs .featured-faqs-bg{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#featured-faqs .faq-margin{
    margin-left: 5rem;
}

#featured-faqs .entry-content3 h5{
    font-size: 40px;
    color: #01549a;
    letter-spacing: 1.32px;
    font-weight: bold;
    margin-bottom: 40px;
}
#featured-faqs .entry-content3 h5::after{
    content: '';
    display: inline-block;
    width: 35px; 
    height: 88px; 
    background-image: url('assets/images/flower.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px; 
    vertical-align: middle; 
    position: relative;
    left: -7px;
    transform: rotateY(180deg);
}

#featured-faqs .contactmapbox iframe{
    width: 100%;
    height: 553px;
}

#featured-faqs .faqs-block .faqsbox{
    background-color: #e9f5ff;
     padding: 27px 30px 20px; 
    margin-bottom: 20px;
}

#featured-faqs .faqs-block .faqsbox .featuretextcontainer .faqs-title{
    font-size: 18px;
    color: #000000;
    text-decoration: none;
}
#featured-faqs .faqs-block .faqsbox .featuretextcontainer .faqs-title:hover{
    background-color: #fdc401;
    color: #000;
}
#featured-faqs .faqs-block .faqsbox .featuretextcontainer .faqs-details p{
    font-size: 16px;
    letter-spacing: 0.53px;
    color: #021338;
    font-weight: 400;
}

#featured-faqs .acc-btn {
    width: 100%;
    padding: 1.3rem;
    border: none;
    outline: none;
    text-align: left;
    transition: all 0.5s linear;
    border-bottom: 1px solid;
    border-bottom-color: #ccc;
}

#featured-faqs .acc-btn:after {
    content: "\f0da";
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    color: #000000;
    float: right;
    transition: all 0.3s linear;
}

#featured-faqs .acc-btn.is-open:after {
    transform: rotate(90deg);
}

#featured-faqs .acc-btn.is-open {
    color: #000;
    margin-bottom: 28px;
}

#featured-faqs .acc-content {
    max-height: 0;
    margin: 0 2rem 1rem 1.4rem;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}*/

/*-----------------------
## FAQS inner page
-----------------------------*/

/*#main .faqnformbox {
    position: relative;
    overflow: hidden;
}*/

/* images */

/*.image-container {
    position: relative;
}

#main  .image-container .image1 img {
    width: 100%;
    height: 585px;
    padding-right: 15px;
}

#main .titletext{
    margin-bottom: 22px;
}

#main .entry-content .faq-heading h4 {
    color: #01549a;
    padding: 0px 0px 38px;
    margin: 0px;
    font-weight: 700;
    letter-spacing: 1.32px;
    line-height: 60px;
    position: relative;
}
#main .entry-content .faq-heading h4::before{
    content: '';
    display: inline-block;
    width: 35px; 
    height: 100px; 
    background-image: url('assets/images/flower.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px; 
    vertical-align: middle; 
    position: relative;
    left: 20px;
}
#main .faqs-inner-content .faq-content {
    margin-bottom: 20px;
    border-radius: 0px;
    padding: 0 0;
}

#main .faqs-inner-content .faq-content button.accordion {
    cursor: pointer;
    width: 100%;
    background: none;
    box-shadow: none;
    border: 1px solid;
    border-color: #01549a;
    padding: 15px 0 15px 12px;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
}

#main .faqs-inner-content .faq-content button:hover h2.faq-title{
    text-decoration: none !important;
}

#main .faqs-inner-content .faq-content button.accordion.active,
button.accordion:hover {
    opacity: 1;
     border: none; 
}
#main .faqs-inner-content .faq-content button.accordion .accordion-arrow{
    background: #01549a;
    padding: 20px;
    position: absolute;
    right: 0;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    top: 0;
}
#main .faqs-inner-content .faq-content button.accordion.active .accordion-arrow svg{
    transform: rotate(180deg);
    transition: all 0.3s ease-in-out;
    color: #fff;
}

#main .faqs-inner-content .faq-content div.panel {
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
    margin: 0 0 0px;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

#main .faqs-inner-content .faq-content div.panel p {
    margin: 0 0 0px;
    color: #000;
    font-size: 16px;
    font-weight: 300;
    line-height: 27px;
    letter-spacing: 0.53px;
}

#main .faqs-inner-content .faq-content div.panel.show {
    opacity: 1;
    max-height: 500px;
    padding: 10px 12px 12px;
    color: #262626;
    font-size: 18px;
    border: 1px solid;
    border-color: #01549a;
    border-top: none;
    border-radius: 0;
}

#main .faqs-inner-content h2.faq-title {
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    -webkit-transition: all 300ms linear 0ms;
    -khtml-transition: all 300ms linear 0ms;
    -moz-transition: all 300ms linear 0ms;
    -ms-transition: all 300ms linear 0ms;
    -o-transition: all 300ms linear 0ms;
    transition: all 300ms linear 0ms;
    position: relative;
    text-align: left;
    color: #1B1A28;
    margin: 0 0;
    text-decoration: none;
     font-family: 'Poppins'; 
}

#main .faqs-inner-content button.accordion.active h2.faq-title {
    color: #000;
}*/

/*-----------------------
 ## End FAQS page
 -----------------------------*/

 /*--------------------------------------------------------------
#  Featured Expert Priceing Section
--------------------------------------------------------------*/
/*#featured-pricings {
    position: relative;
    overflow: hidden;
    padding: 0 7%;
}

#featured-pricings .featured-pricings-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#featured-pricings .title-section {
    display: inline-block;
     margin-bottom: 4em; 
    margin-top: 0em;
}

#featured-pricings .title-section h1 {
    margin: 0 0 5px;
    font-size: 40px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 0 17px;
    color: #01549a;
    position: relative;
}
#featured-pricings .title-section h1::before{
    content: '';
    display: inline-block;
    width: 35px;
    height: 100px; 
    background-image: url('assets/images/flower.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px; 
    vertical-align: middle; 
    position: relative;
    left: 20px;
}
#featured-pricings .cleaning-chemical{
    position: absolute;
    top: 32px;
    right: 14%;
    width: 54px;
    z-index: 2;
}

#featured-pricings .title-section p {
    font-size: 32px;
    font-weight: 600;
    color: #000;
    padding: 0 17px;
    color: #1D3176;
}

#featured-pricings .maincontent {
    position: relative;
    overflow: hidden;
    box-shadow: 0px 4px 20px #00000029;
    height: 100%;
    width: 100%;
    text-align: center;
    transition: 0.3s;
}

#featured-pricings .titlecontent h3 {
    font-size: 50px;
    font-weight: 400;
    color: #fff;
    padding: 24px 4px 40px 0px;
    letter-spacing: 1.65px;
    margin: 0;
}

 .titlecontent span {
    color: #fff;
    padding: 15px 0px 0px 0px;
}

#featured-pricings .pricing-column{
    column-gap: 4px;
}
#featured-pricings .featured-pricings-item:nth-child(1),
#featured-pricings .featured-pricings-item:nth-child(3){
    background: #01549A;
    height: auto;
    transition: 0.3s;
}

#featured-pricings .featured-pricings-item:nth-child(2){
    transform: scale(1.05);
    z-index: 1;
    background: #0C7DDB;
    height: auto;
    transition: 0.3s;
} 

#featured-pricings .wp-block-list{
    padding: 48px 18px 40px 0px;
}
#featured-pricings h2.entry-title {
    position: relative;
    background: #FDC401;
    margin: 0 auto 11%;
    left: 0;
    right: 0;
    top: 25%;
    width: fit-content;
    padding: 6px 20px 10px 20px;
    z-index: 1;
}
#featured-pricings .entry-content:hover h2.entry-title{
    background: #0C7DDB;
    color: #fff;
}
#featured-pricings .entry-content:hover h2.entry-title a{
color: #fff;
}
#featured-pricings h2.entry-title a {
    color: #01549A;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.59px;
}

#featured-pricings .circle{
    position: absolute;
    transform: translateY(55%);
    top: -185px;
    left: -166px;
    width: 170%;
    height: 100%;
    background: #ffffff;
    clip-path: circle();
}

#featured-pricings .pcontaint ul li {
    padding: 11px 0px;
    font-size: 18px;
    font-weight: 400;
    color: #021338;
    letter-spacing: 0.59px;
}

#featured-pricings .pcontaint ul li::before {
    opacity: 1;
    content: "\f00c";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    font-size: 16px;
    color: #01549a;
    z-index: 5;
    padding: 0px 10px;
}

#featured-pricings .maincontent .button-content {
    background-color: #01549a;
    padding: 6px 8px 5px 24px;
    text-align: center;
    position: relative;
    display: inline-block;
    letter-spacing: 2px;
    margin-bottom: 11%;
    margin-top: 7%;
    transition: 0.3s;
}
#featured-pricings .entry-content:hover .button-content{
    background-color: #FDC401;
}
#featured-pricings .entry-content:hover .button-content {
    animation: wiggle 2.5s linear;
}
@keyframes wiggle {
    0%, 7% {
      transform: rotateZ(0);
    }
    15% {
      transform: rotateZ(-5deg);
    }
    20% {
      transform: rotateZ(3deg);
    }
    25% {
      transform: rotateZ(-3deg);
    }
    30% {
      transform: rotateZ(3deg);
    }
    35% {
      transform: rotateZ(-3deg);
    }
    40%, 100% {
      transform: rotateZ(0);
    }
  }
#featured-pricings .maincontent .button-content a {
    font-weight: 300;
    font-size: 17px;
    transition: 0.5s;
    color: #fff;
}
#featured-pricings .button-content a::after{
    content: '\f061';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    float: right;
    height: 20px;
    width: 38px;
    color: #FFF;
    font-size: 19px;
    
}*/

 /* Featured Contact */
 
/* #featured-contact {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 28%, #000 0%);
}

#featured-contact .contact-margin{
    margin-top: 180px;
}

#featured-contact .box1{
    width: 48px;
    height: 45px;
    background-color: #fdc401;
    position: absolute;
    top: 12.9rem;
    left: 0rem;
}

#featured-contact .box2{
    width: 28px;
    height: 25px;
    background-color: #e9f5ff;
    position: absolute;
    top: 15.7rem;
    left: 3rem;
}

#featured-contact .box3{
    width: 48px;
    height: 45px;
    background-color: #ffffff36;
    position: absolute;
     top: 39.5rem; 
    left: 0rem;
    bottom: 2.2rem;
}

#featured-contact .box4{
    width: 34px;
    height: 36px;
    background-color: #01549a;
    position: absolute;
    top: 42.2rem; 
    left: 3rem;
    bottom: 0;
}

#featured-contact .box5{
    width: 18px;
    height: 17px;
    background-color: #e9f5ff57;
    position: absolute;
     top: 41.2rem; 
    left: 5.1rem;
    bottom: 2.2rem;
}

#featured-contact .featured-contact-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#featured-contact .entry-content3 h5{
    font-size: 40px;
    color: #fff;
    letter-spacing: 1.32px;
    font-weight: 500;
    margin-left: -50px;
    position: relative;
}
#featured-contact .entry-content3 h5::before{
    content: '';
    display: inline-block;
    width: 35px; 
    height: 100px; 
    background-image: url('assets/images/flower2.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px; 
    vertical-align: middle; 
    position: relative;
    left: 20px;
}

#featured-contact h4.counters-title {
    margin: 4px 0;
}

#featured-contact h4.counters-title a {
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.66px;
}

#featured-contact .contactformdiv {
    background: #fff;
    border: 2px solid;
    border-color: #021338;
    padding: 4% 8%;
    position: relative;
    clip-path: polygon(0 0, 0 90%, 11% 100%, 100% 100%, 100% 0);
    width: 90%;
    margin-left: 6rem;
}

#featured-contact .borderimage {
    position: absolute;
    top: 2%;
    right: 2%;
}

#featured-contact .title-section {
    text-align: center;
    margin-bottom: 2em;
    display: block !important;
}

#featured-contact .title-section .contactheadbg {
    margin: 10px 0 30px 0;
}

#featured-contact .title-section h5 {
    color: #021338;
    font-size: 30px;
    padding: 5px 15px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.99px;
}

#featured-contact .title-section h1 {
    margin: 20px auto;
    font-size: 35px;
    line-height: 1.1;
    font-weight: 600;
    padding: 0 17px;
    position: relative;
    z-index: 1;
    border-left: none;
}

#featured-contact .title-section h1 span {
    color: #FAA919;
}

#featured-contact h2.subtitle {
    color: #000000;
    margin: 30px 0;
    font-size: 22px;
    font-weight: 300;
    padding: 0 0em 0 20px;
    position: relative;
}

#featured-contact .section-area-textlist {
    font-size: 26px;
    line-height: 32px;
    font-weight: 300;
    margin: 29px 0;
    padding: 0 232px 0 25px;
    text-align: left;
    position: relative;
}

#featured-contact .button-content {
    border-radius: 10px;
    padding: 8px 20px;
    margin: 0 0 0 25px;
    text-align: center;
    position: relative;
    display: inline-block;
    transition: 0.5s;
    border: 3px solid #0A9642;
}

#featured-contact .title-section {
    position: relative;
}

#featured-contact .button-content a {
    font-size: 21px;
    color: #000000;
    font-weight: 500;
}

#featured-contact .title-section .row h3 {
    font-size: 25px;
    font-weight: bold;
}

#featured-contact .title-section .row p {
    margin: 8px 0px 20px 0px;
    font-size: 18px;
    font-weight: bold;
}

#featured-contact .title-section .row i {
    color: #0A9642;
    font-size: 34px;
    padding: 10px;
    border: 2px solid #0A9642;
    border-radius: 10px;
    margin: 0px 22px
}

#featured-contact .button-content i {
    font-size: 20px;
    padding: 5px 10px;
    color: #0A9642;
}

#featured-contact textarea {
    padding: 12px;
    height: 135px;
     color: #c2bfbf; 
}

#featured-contact select{
    padding: 12px;
    width: 100%;
     color: #c2bfbf; 
}

#featured-contact .contact-number{
    display: flex;
    align-items: center;
}

#featured-contact .contact-mail{
    display: flex;
    align-items: center;
    margin-top: 30px;
}

#featured-contact .contact-address{
    display: flex;
    align-items: center;
    margin-top: 30px;
}

#featured-contact .contact-left-text p{
    color: #fff;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.59px;
}

#featured-contact .contact-left-text i,
#featured-contact .contact-left-text svg{
    color: #fdc401;
    font-size: 24px;
    margin-right: 14px;
}
#featured-contact .contact-number:hover i, #featured-contact .contact-number:hover svg,
#featured-contact .contact-mail:hover i, #featured-contact .contact-mail:hover svg,
#featured-contact .contact-address:hover i, #featured-contact .contact-address:hover svg{
    transform: rotate(360deg);
    transition: 1s ease;
}

#featured-contact .contactformdiv input[type="text"], #featured-contact .contactformdiv input[type="email"], #featured-contact .contactformdiv input[type="url"], #featured-contact .contactformdiv input[type="password"], #featured-contact .contactformdiv input[type="search"], #featured-contact .contactformdiv input[type="number"], #featured-contact .contactformdiv input[type="tel"], #featured-contact .contactformdiv input[type="range"], #featured-contact .contactformdiv input[type="date"], #featured-contact .contactformdiv input[type="month"], #featured-contact .contactformdiv input[type="week"], #featured-contact .contactformdiv input[type="time"], #featured-contact .contactformdiv input[type="datetime"], #featured-contact .contactformdiv input[type="datetime-local"], #featured-contact .contactformdiv input[type="color"], #featured-contact .contactformdiv input[type="file"], #featured-contact .contactformdiv textarea, #featured-contact select{
    border: 1px solid;
    border-color: #021338;
}

#featured-contact .contactformdiv button, #featured-contact .contactformdiv input[type="button"], #featured-contact .contactformdiv input[type="reset"], #featured-contact .contactformdiv input[type="submit"]{
    background: #01549a;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; 
    border-radius: 0;
    padding: 8px 45px;
    margin: 5px 0 5px 0px; 
    text-align: center;
    position: relative;
    display: inline-block;
    transition: 0.5s;
    color: #fff;
    transition: all 0.5s ease-in-out;
    border: none;
    font-weight: 300;
    font-size: 18px;
    letter-spacing: 0.59px;
    text-transform: uppercase;
    text-decoration: none;
}*/

/*--------------------------------------------------------------
#  Featured clients Section
--------------------------------------------------------------*/
#featured-clients {
    position: relative;
    overflow: hidden;
}

#featured-clients .featured-clients-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#featured-clients .section-content {
    position: relative;
    opacity: 0.8;
}

#featured-clients .featured-clients-item:hover img {
    transform: translateY(-15px);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#featured-clients .featured-clients-item img {
    transition: all 0.5s ease-in-out;
}


/*-----------------------
## Contact Inner page
-----------------------------*/

#content .contact-inner-content {
    position: relative;
    overflow: hidden;
}

#content .contactinnpage-infobox {
    padding: 0 76px;
}

#content .infoboxinn .contact-text{
    padding: 43px 30px;
    align-items: center;
    border: 1px solid ;
    border-color: #01549a;
    box-shadow: #00000029 0 3px 30px;
}

#content .infoboxinn .address-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #01549a;
    height: 85px;
    width: 85px;
    border-radius: 50%;
    color: #fff;
    font-size: 34px;
}

#content .infoboxinn .contact-text h4,
#content .infoboxinn .contact-text h4 a {
    padding: 0px;
    text-align: left;
    font-size: 24px;
    font-weight: 700;
    color: #01549a;
    line-height: 27px;
    letter-spacing: 0.59px;
}
#content .infoboxinn .contact-text p{
    color: #707070;
    font-size: 18px;
    padding: 13px 0rem 0 0px;
    line-height: 32px;
    letter-spacing: 0.59px;
}

#content .leftbox .contact-right-side{
    border: 1px solid;
    border-color: #01549a;
    padding: 10px;
    width: 100%;
}
#content .contactform {
    position: relative;
    background-color: #ffffff;
}
#content .contactform .innershortcode{
    padding: 0px 40px;
}
#content .rightbox-form .bttm-brdrshape {
    width: 795px;
    height: 635px;
    border: 2px solid #fff;
    border-radius: 4px;
    position: absolute;
    top: 12px;
    bottom: 0;
    left: 13px;
    right: 0;
}

#content .inquiry-screen{
    text-align: center;
    padding: 20px 44px;
}

#content .inquiry-screen .conct-header{
    position: relative;
}

#content .rightbox-form .conct-header h1 {
    color: #01549a;
    font-size: 28px;
    font-weight: 700;
    padding: 0 0;
    opacity: 1;
    letter-spacing: 0.92px;
    line-height: 32px;
}

#content .rightbox-form .conct-header hr{
    color: #fdc401;
    background-color: #fdc401;
    height: 1px;
    opacity: 1;
    width: 80%;
    position: absolute;
    left: 2.3rem;
    /* right: 0; */
    bottom: -9px;
}

#content .featured-contact-mapbox {
    padding: 4% 0 0;
}

#content .featured-contact-mapbox iframe {
    width: 100%;
    height: 390px;
    padding-bottom: 0;
}
#content textarea {
    padding: 12px;
    margin: 10px 0;
    border: 2px solid;
    border-color: #9CAAC2;
}

#content .innershortcode input[type="text"],
#content .innershortcode input[type="email"],
#content .innershortcode input[type="url"],
#content .innershortcode input[type="password"],
#content .innershortcode input[type="search"],
#content .innershortcode input[type="number"],
#content .innershortcode input[type="tel"],
#content .innershortcode input[type="range"],
#content .innershortcode input[type="date"],
#content .innershortcode input[type="month"],
#content .innershortcode input[type="week"],
#content .innershortcode input[type="time"],
#content .innershortcode input[type="datetime"],
#content .innershortcode input[type="datetime-local"],
#content .innershortcode input[type="color"],
#content .innershortcode input[type="file"],
#content .innershortcode textarea,
#content .innershortcode select {
    border-radius: 0px;
    background: #fff;
    z-index: 2000;
    width: 100%;
    color: #9F9999;
    padding: 0 0 0 15px;
    font-size: 16px;
    height: 50px;
    font-weight: 300;
    margin: 20px 0 0;
    letter-spacing: 0.53px;
    line-height: 32px;
    border: 1px solid;
    border-color: #01549a;
}

#content .innershortcode textarea {
    height: 132px;
    padding: 10px 15px;
}

#content .innershortcode input::placeholder,
#content .innershortcode textarea::placeholder {
    color: #093E71;
    opacity: 1;
    z-index: 999;
}

#content .innershortcode p .wpcf7-spinner{
    visibility: visible !important;
    background: #FDC401;
    opacity: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
    background: transparent;
}

#content .innershortcode input[type="submit"] {
    color: #fff;
    background: #01549a;
    font-weight: 300;
    padding: 10px 37px 10px;
    position: relative;
    cursor: pointer;
    font-size: 18px;
    margin: 10px 0px 0;
    transition: all 0.5s ease 0s;
    display: inline-block;
    border-radius: 0px;
    box-shadow: none;
    text-decoration: none;
    border: none;
    letter-spacing: 0.59px;
    line-height: 26px;
}

#content .innershortcode input[type="submit"]:hover {
    background: #fdc401;
    color: #FFFFFF;
    transition: all .3s;
    border: 1px solid #000;
}

#content .innershortcode input[type="submit"]:hover .wpcf7-spinner::before{
    color: #fff;
}

#content .featured-contact-phone:hover .featured-contact-icon,
#content .featured-contact-address:hover .featured-contact-icon,
#content .featured-contact-mailid:hover .featured-contact-icon {
    -webkit-animation: sp 1.5s linear infinite;
    animation: sp 1.5s linear infinite;
}

/*--------------------------------------------------------------
#  Inner page Gallery
--------------------------------------------------------------*/

/*#main .gallery-title{
    display: block;
}

#content .gallery-inner-content {
    position: relative;
    overflow: hidden;
    margin: 0 0;
}

#main .gallerybox {
    margin: 0 auto;
}

#main .gallerybox .img1-3{
    height: 303px;
}

#main .gallerybox .img2{
    height: 263px;
}

#main .gallerybox .img4{
    height: 342px;
}
#main .gallerybox .img4-parent{
    top: -40px;
}

#main .gallerybox .img5{
    height: 342px;
}

#main .gallery-image{
    position: relative;
}

#main .entry-content .gallery-image p{
    position: absolute;
    bottom: 0px;
    left: 0;
    background-color: #01549a;
    width: 100%;
    font-size: 18px;
    letter-spacing: 0.59px;
    line-height: 31px;
    padding: 24px 38px 24px;
    color: #fff;
    opacity: 0.8;
    margin: 0;
}
#main .gallery-image .overlay{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #E9F5FF;
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: .3s ease;
    transition: .3s ease;
    opacity: 0.3;
    z-index: 1;
}
#main .gallery-image:hover .overlay{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.fancybox-toolbar {
    top: 40px !important;
}*/

/*--------------------------------------------------------------
#  Featured Testimonials Section
--------------------------------------------------------------*/

/*#featured-testimonials .container .mainimg img {
    width: 80%;
    height: 380px;
    position: relative;
    border-radius: 30px;

}

#featured-testimonials .container .bgimg img {
    width: 28%;
    height: 460px;
    position: absolute;
    top: 20px;
    bottom: 0;
    left: 10%;
    z-index: 2;
}

#featured-testimonials {
    position: relative;
    overflow: hidden;
    background-color: #fff;
}

#featured-testimonials .content-wrapper {
    position: relative;
}

#featured-testimonials .testimonial-overlay {
    background: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
     opacity: 1; 
}

#featured-testimonials .featured-testimonials-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#featured-testimonials .title-section {
    display: block;
    margin-bottom: 4em;
}

#featured-testimonials .testimonials-heading{
    text-align: start;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 40px;
    color: #01549a;
    font-weight: 700;
}


#featured-testimonials .expanded-view{
    display: none;
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin: 0 0 30px;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: start;
}
#featured-testimonials .expanded-image-container{
    width: 17%;
}
#featured-testimonials .expanded-image-container img {
    width: 100%;
    height: 230px;
}
#featured-testimonials .expanded-text-container {
    width: 80%;
    padding-left: 20px;
}
#featured-testimonials .animate{
    animation-name: slidein;
    animation-duration: 1s;
}
@keyframes slidein {
    from {
        transform: scale(0.5); 
        opacity: 0; 
    }
    to {
        transform: scale(1); 
        opacity: 1; 
    }
}

#featured-testimonials .expanded-text-container h2,
#featured-testimonials .expanded-text-container h4 {
    margin: 0 0 10px;
}
#featured-testimonials .expanded-text-container p {
    font-size: 16px;
    letter-spacing: 1.14px;
    line-height: 29px;
    color: #707070;
}
#featured-testimonials .expanded-text-container h2{
    color: #000;
    font-size: 25px;
    font-weight: 400;
}
#featured-testimonials .expanded-text-container h4{
    font-size: 16px;
    color: #fdc401;
}*/
/************* GPT ***************/
/*#featured-testimonials .client-single {
    position: relative;
     margin-bottom: 30px; 
    transition: 0.3s ease-in-out;
}
#featured-testimonials .client-single:hover{
    transform: scale(1.05);
}

#featured-testimonials .client-img {
    width: 100%;
    height: 219px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px; 
    box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2);
}

#featured-testimonials .client-single .image-text {
    text-align: center;
    margin-top: 10px;
}
#featured-testimonials .client-comment {
    display: none;
    position:absolute;
    bottom: 9rem;
    left: 39rem;
    width: 746px;
    padding: 15px;
    transform: translate(-50%, -50%);
    z-index: 10;
}*/

/*--------------------------------------------------------------
#  Featured Testimonial Inner Page
--------------------------------------------------------------*/

/*#main .testimonial-inner-page {
    position: relative;
}

#main .testimonial-inner-content {  
    background: linear-gradient(180deg, #fff 72%, #01549a 63%);
     background: #F7F7F7; 
    padding: 20px 2px;
    position: relative;
    border: 1px solid;
    border-color: #01549a;
}
#main .testimonial-inner-content::before {  
    content: "\f10d";
    font-family: 'FontAwesome';
    font-size: 57px;
    color: #fdc401;
    padding: 0px 26px;
}

#main .testimonial-inner-content .content-image{
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: 0 27px;
}

#main .testimonial-inner-content .content-image .innertestimg{
    display: inline-block;
    width: 124px;
    height: 100%;
    background: transparent;
    padding: 5px;
    transition: all 0.5s ease 0s;
}

#main .testimonial-inner-content:hover .content-image .innertestimg{
    background: #fdc401;
    border-radius: 50%;
}

#main .testimonial-inner-content .content-image img{
    z-index: 2;
    position: relative;
    height: auto;
    border-radius: 50%;
    transition: .6s ease;
    width: 124px;
     bottom: 20px; 
}

#main .testimonial-inner-content h4{
    margin: 20px 0 5px 0;
}
#main .testimonial-inner-content h4.testimonials-title a{
    color: #fff;
    text-decoration: none;  
    font-weight: 400;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.66px;
    line-height: 31px;
    cursor: default;
}

#main .testimonial-inner-content .testimonials-designation{
    font-size: 18px;
    clear: both;
    color: #fff;
    margin: 16px 0;
    line-height: 0px;
    font-weight: 400;
    letter-spacing: 0.59px;
}

#main .testimonial-inner-content .testimonialstextbg h3{
    font-size: 15px;
    margin: 0;
    color: #4B4B4BD6;
}

#main .testimonial-inner-content .testimonialstextbg p{
    margin: 0px 0px 0px;
}
#main .testimonial-inner-content .testimonialstextbg p {
    font-size: 18px;
    color: #707070;
    line-height: 31px;
    font-weight: 300;
    padding: 0 11px 13px 27px;
    letter-spacing: 0.59px;
}
#main .testimonial-inner-content:hover h4,
#main .testimonial-inner-content:hover h4.testimonials-title a{ 
    color: #fdc401; 
}
#main .testimonial-inner-content .testimonialstextbg{
    position: relative;
    text-align: left;
 }*/

/*--------------------------------------------------------------
# Latest Posts(blog)
--------------------------------------------------------------*/
/*#featured-posts {
    position: relative;
    overflow: hidden;
    padding-top: 5em;
}*/

/* #featured-posts .posts-overlay {
    background: #0F5290bf;
    background: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.9;
} */

/*#featured-posts .featured-posts-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
}

#featured-posts .title-section {
    display: block;
    margin-bottom: 1em;
}

#featured-posts .title-section h1 {*/
    /* margin: 0 0 20px; */
    /*font-size: 40px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0px;
    color: #01549a;
    padding: 0 0px;
    border-radius: 0px;
    position: relative;
}*/
/*#featured-posts .title-section h1::before{
    content: '';
    display: inline-block;
    width: 35px; 
    height: 100px; 
    background-image: url('assets/images/flower.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px;
    vertical-align: middle;
    position: relative;
    left: 20px;
}

#featured-posts .featured-image {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0;
    height: 515px;
    width: 100%;
    transition: 0.5s;
    position: relative;
}

#featured-posts .entry-container{
    position: absolute;
    bottom: 0px;
    background: linear-gradient(180deg, #00000000, #000000);
}

#featured-posts .post-item {
    /* border-radius: 10px; */
    /*background-color: #fff;*/
    /* padding: 5px; */
    /*position: relative;
    width: 90%;
}

#featured-posts .post-item:hover h2.entry-title a {
    color: #F6BB19;
}

#featured-posts .entry-contentbox {
    padding: 0px 28px 18px 39px;
    position: relative;
}

#featured-posts .entry-contentbox .entry-title{
    margin: 0 0px 20px;
}

#featured-posts .entry-meta {
    padding: 6px 7px 0;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 10px 0;
    text-decoration: none;
       border: none;
    justify-content: space-between;
}

#featured-posts .entry-meta a{
    font-size: 14px;
    color: #fff;
}

#featured-posts .entry-meta i,
#featured-posts .entry-meta svg {
    font-size: 18px;
    text-decoration: none;
    color: #fdc401;
    line-height: 8px;
    text-align: center;
    font-weight: 400;
}

#featured-posts .entry-meta .d-flex {
    gap: 30px;
}

#featured-posts h2.entry-title a {
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-weight: 400;
    position: relative;
    line-height: 34px;
    letter-spacing: 0.66px;
}

#featured-posts .entry-content {
    padding: 20px 0 20x 22px;
}

#featured-posts .entry-content p {
    color: #000;
    line-height: 18px;
    margin-bottom: 5px;
    padding-right: 10px;
    font-size: 15px;
    z-index: 1;
    position: relative;
}

#featured-posts .posts-date{
    padding: 12px 0 0 0;
    display: flex;
    justify-content: space-between;
}

#featured-posts .posts-date .arrow-up{
    margin-right: 4rem;
    transform: rotate(45deg);
    font-size: 18px;
    color: #fff;
    transition: 0.4s;
}

#featured-posts .posts-date svg{
    color: #fdc401;
}

#featured-posts .posts-date a{
    color: #fff;
    font-weight: 300;
}

#featured-posts hr{
    width: 90%;
    color: #fff;
    opacity: 1;
}*/
/*--------------------------------------------------------------
# Inner Blog Posts
--------------------------------------------------------------*/
/*#main .bloginn-inner-content,
#secondary .bloginn-inner-content {
    position: relative;
    overflow: hidden;
}

#main .entry-content .title-section,
#secondary .blog-heading{
    display: block;
}

#main .entry-content .blog-heading h1,
#secondary .blog-heading h1{
    margin: 20px 0 0px;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0px;
    color: #01549a;
    padding: 0 0px;
    border-radius: 0px;
    position: relative;
}
#secondary .blog-heading h1::before{
    content: '';
    display: inline-block;
    width: 35px; 
    height: 100px; 
    background-image: url('assets/images/flower.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px; 
    vertical-align: middle; 
    position: relative;
    left: 20px;
}

#featured-posts-item {
    position: relative;
    overflow: hidden;
    height: fit-content !important;
}

#main .bloginn-inner-content .content-image img,
#secondary .bloginn-inner-content .content-image img,
#featured-posts-item .content-image img {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0;
    height: 300px;
    transition: 0.5s;
    width: 90%;
}
#main .bloginn-inner-content .entry-contentbox,
#secondary .bloginn-inner-content .entry-contentbox,
#featured-posts-item .content {*/
    /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
    /*background: linear-gradient(180deg, #00000000, #000000D6 89%);
    padding: 0px 28px 18px 39px;
    position: absolute;
    width: 90%;
    bottom: 0;
}
#main .bloginn-inner-content .entry-meta,
#secondary .bloginn-inner-content .entry-meta,
#featured-posts-item .content .entry-meta{
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 10px 0;
    text-decoration: none;
       border: none;
}

#main .bloginn-inner-content .entry-contentbox hr,
#secondary .bloginn-inner-content .entry-contentbox hr,
#featured-posts-item .content hr{
    color: #ffffff;
    margin-top: 24px;
    border: none;
    height: 1px;
    background-color: #ffffff;
    opacity: 0.8;
}

.separator{
    display: inline-block;
    width: 1px;
    height: 20px;
    background-color: #fff;
    margin: 0 14px 0 14px;
    vertical-align: middle;
}

#main .bloginn-inner-content h2,
#main .bloginn-inner-content h2.entry-title a,
#secondary .bloginn-inner-content h2.entry-title a,
#featured-posts-item h2.entry-title a,
#featured-posts-item h2 {
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    position: relative;
    line-height: 29px;
    letter-spacing: 0.66px;
}
#featured-posts-item h2.entry-title a{
    text-transform: none;
    font-weight: 400;
}

#main .bloginn-inner-content .content-image,
#secondary .bloginn-inner-content .content-image,
#featured-posts-item .content-image{
    position: relative;
}

#secondary .bloginn-inner-content .content-image .feature-postbtn:after,
#featured-posts-item .content-image .feature-postbtn:after {
    bottom: 4.7rem;
}

#main .column-gap,
#secondary .column-gap{*/
    /* column-gap: 3rem; */
/*}

#main .bloginn-inner-content .entry-meta h4 .author,
#secondary .bloginn-inner-content .entry-meta h4 .author,
#main .bloginn-inner-content .entry-meta h4 .topic,
#secondary .bloginn-inner-content .entry-meta h4 .topic,
#featured-posts-item .entry-meta h4 .topic,
#featured-posts-item .content .entry-meta a {
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 21px;
}

#main .bloginn-inner-content .entry-meta h4 i,
#main .bloginn-inner-content .entry-meta h4 svg,
#secondary .bloginn-inner-content .entry-meta h4 i,
#secondary .bloginn-inner-content .entry-meta h4 svg,
#featured-posts-item .content i,
#featured-posts-item .content svg{
    color: #fdc401;
}

#main .bloginn-inner-content .entry-meta h4 a,
#main .bloginn-inner-content .entry-meta h4 a,
#secondary .bloginn-inner-content .entry-meta h4 a,
#secondary .bloginn-inner-content .entry-meta h4 a{
    color: #fff;
    font-size: 300;
}

#main .bloginn-inner-content .entry-meta h4,
#secondary .bloginn-inner-content .entry-meta h4
#featured-posts-item .entry-meta h4{
    color: #A1A1A1;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    line-height: normal;
    margin: 0;
}

#main .bloginn-inner-content .post-date,
#secondary .bloginn-inner-content .post-date,
#featured-posts-item .post-date {
    font-size: 16px;
    color: #fff;
    letter-spacing: 0.53px;
    line-height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    font-weight: 300;
}

#main .bloginn-inner-content .post-date svg,
#main .bloginn-inner-content .post-date i,
#secondary .bloginn-inner-content .post-date svg,
#secondary .bloginn-inner-content .post-date i{
    color: #fdc401;
}

#main .bloginn-inner-content .post-date .arrow-up,
#secondary .bloginn-inner-content .post-date .arrow-up,
#featured-posts-item .content .post-date .arrow-up{
    color: #fff;
    transform: rotate(45deg);
    font-size: 18px;
    margin-right: 18px;
}
#main .bloginn-inner-content:hover .post-date .arrow-up,
#secondary .bloginn-inner-content:hover .post-date .arrow-up {
    animation-name: rotate;
    animation-duration: 2s;
}
@keyframes rotate{
    0%{
        transform: rotate(45deg);
    }
    25%{
        trasform: rotate(90deg); 
    }
    50%{
        transform: rotate(135deg);
    }
    75%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(225deg);
    }
}*/

 /* Shine  */
/*.featured-bloginn-item{
	position: relative;
    overflow: hidden;
}
.featured-bloginn-item::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.featured-bloginn-item:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}

#main .bloginn-inner-content:hover .feature-postbtn:after,
#secondary .bloginn-inner-content:hover .feature-postbtn:after{
    color: #3f536d !important;
}*/


/*--------------------------------------------------------------
#                   Footer
--------------------------------------------------------------*/
/* 
#colophon .footerbox .social-twitter a {
    background-image: url('assets/images/twitter.png');
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    width: 24px; 
    height: 24px; 
    display: inline-block; 
    text-indent: -9999px; 
    filter: grayscale(100%) brightness(0) saturate(100%) invert(35%) sepia(100%) hue-rotate(200deg);
    display: none;
} */

/* #colophon .footerbox .social-twitter a::before{
    content: '\e61b';
    font-family: 'FonAwesome';
    font-weight: 900;
} */

/* #colophon .footerbox .social-twitter a svg{
    display: none;
} */

#colophon {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

#colophon .footer-bgoverlay {
    background: linear-gradient(to right, #001f6d, #003399); /* Deep blue like screenshot */
    /* opacity: 1; */
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* z-index: 0; */
}

#colophon .footer-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    top: 0;
    left: 0;
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 1;
}

#colophon .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    position: relative;
}

#colophon p {
    font-size: 16px;
    color: #000000;
    z-index: 3;
    position: relative;
    text-align: left;
    line-height: 27px;
    font-weight: 400;
}

/*#colophon .social-links {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s ease-in-out;
}

#colophon .social-links a:hover{
    background: #3f536d;
    color: #fff;
    box-shadow: rgba(255, 255, 255, 2.24) 0px 1px 6px 1px;
    transition: all 0.6s ease-in-out;
}

#colophon .social-links a {
    font-size: 18px;
    background: #fff;
    color: #3F536D;
    margin-right: 20px;
    transition: all 0.2s ease-in-out;
    font-family: "Font Awesome 5 Brands" !important;
    padding: 5px 0px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    margin: 13px;
}*/

/*#colophon .widget-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0;
    color: #000;*/
    /* height: 60px; */
    /*line-height: 30px;
    padding: 0;
    background: transparent;
}

#colophon .widget-title::before{
    display: none;
}*/

/*#colophon .widget_nav_menu ul li:before {
    content: '\f068';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    font-size: 13px;
    color: #000;
    position: relative;
    margin: 5px 10px 5px 5px;
}*/

/*#colophon .widget_nav_menu ul li a {
    color: #000;
    font-size: 16px;
}

#colophon .widget_nav_menu ul li a:active{
    color: #fdc401;
}

#colophon .gap-16{
    gap: 4rem;
}

#colophon .widget_nav_menu ul li:hover a{
    color: #fdc401;
}*/

#colophon .footer-widgets-area .widget_text ul li:nth-child(1),
#colophon .footer-widgets-area .widget_text ul li:nth-child(3) {
    margin-bottom: 0;
}

/*#colophon .footer-widgets-area .widget_text ul li:nth-child(2),
#colophon .footer-widgets-area .widget_text ul li:nth-child(4),
#colophon .footer-widgets-area .widget_text ul .list-email {
    8margin-left: 2.7rem;
}*/


#colophon .footer-widgets-area .widget_text ul li svg {
    margin-right: 17px;
    transition: 0.3s;
}
#colophon .footer-widgets-area .widget_text ul li:hover svg {
    color: #000;
    transition: 0.3s;
}
/*#colophon .site-info p {
    font-size: 15px;
    color: #fff;
    border-top: 1px solid;
    border-top-color: #000;
}*/

#colophon .footer-widgets-area {
    position: relative;
    z-index: 3;
}

#colophon ul {
    list-style: none;
    padding: 0;
}

#colophon ul a {
    text-decoration: none;
}

/*#colophon a,
#colophon li,
#colophon .textwidget {
    color: #000000;
}
#colophon li{
    font-size: 16px;
    letter-spacing: 0.53px;
}*/
#colophon .footerbox:first-child .hentry {
    width: 110%;
}

#colophon .footerbox .hentry .social-profile-icons ul{
    display: flex;
    gap: 16px;
    align-items: center;
}

#colophon .footerbox .hentry .social-profile-icons li{
    margin-bottom: 17px;
    border: 2px outset;
    border-color: #000;
    padding: 11px;
    font-size: 18px;
    width: 40px;
    height: 37px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*#colophon .footerbox .hentry .social-profile-icons li:hover{
    transform: scale(1.1);
    background-color: #01549a;
    transition: all 0.5s;
}
#colophon .footerbox .hentry .social-profile-icons li:hover a{
    color: #fdc401;
    transform: scale(1.1);
}
#colophon .footer-widgets-area .widget ul li {
    margin-bottom: 13px;
    background-color: transparent;
}
#colophon .site-info .copy-right {
    color: #000;
    font-size: 16px;
    position: relative;
    z-index: 3;
    margin-top: 20px;
}*/
#colophon .widget_nav_menu .current-menu-item a{
    color: #fdc401;
    /* font-weight: bold; */
}

#colophon .widget{
    border: none;
    background-color: transparent;
    margin: 0 0 2.5em;
}
.backtotop {
    background-color: #FDAF1B;
    z-index: 300;
    font-size: 25px;
    position: fixed;
    bottom: -100px;
    right: 25px;
    color: #fff;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    -ms-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
}

.backtotop:hover,
.backtotop:focus {
    background-color: #000;
}

#loader-wrapper {
    overflow-x: hidden;
    overflow-y: hidden;
    vertical-align: middle;
    background-color: #fff;
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    height: 100%;
    min-height: 100%;
    z-index: 9999;
}

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 80px;
    height: 80px;
}

.preloader-one #loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite;
    /* / Chrome, Opera 15+, Safari 5+ / */
    animation: spin 2s linear infinite;
    /* / Chrome, Firefox 16+, IE 10+, Opera / */
}

.preloader-one #loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;

    -webkit-animation: spin 3s linear infinite;
    /* / Chrome, Opera 15+, Safari 5+ / */
    animation: spin 3s linear infinite;
    /* / Chrome, Firefox 16+, IE 10+, Opera / */
}

.preloader-one #loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#loader svg,
.preloader-disable #loader-wrapper {
    display: none;

}

#loader svg {
    width: 70px;
    height: 70px;
    fill: #d72924;
}

.preloader-two #loader .loader-two,
.preloader-three #loader .loader-three,
.preloader-four #loader .loader-four,
.preloader-five #loader .loader-five {
    display: block;
}

/* / Scroll to top Button / */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.scroll-to-top a {
    background-color: #FDC401;
    padding: 8px;
    display: flex;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.scroll-to-top a img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
/*--------------------------------------------------------------
#                   RESPONSIVE
--------------------------------------------------------------*/
/*@media screen and (min-width: 567px) {

    .footer-widgets-area.col-2 .hentry,
    .footer-widgets-area.col-4 .hentry {
        width: 50%;
        float: left;
    }

    .footer-widgets-area.col-2 .hentry:nth-child(2n+1),
    .footer-widgets-area.col-4 .hentry:nth-child(2n+1) {
        clear: left;
    }

    .footer-widgets-area.col-2 .hentry:nth-child(odd),
    .footer-widgets-area.col-4 .hentry:nth-child(odd) {
        padding-right: 40px;
    }

    .footer-widgets-area.col-2 .hentry:nth-last-child(-n+2),
    .footer-widgets-area.col-4 .hentry:nth-last-child(-n+2) {
        margin-bottom: 0;
    }

    #featured-clients .section-content .gap-20{
        gap: 3rem !important;
    }
}

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

    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6 {
        margin: 0 -15px;
    }

    .col-2 article,
    .col-3 article,
    .col-4 article,
    .col-5 article,
    .col-6 article {
        padding: 0 19px;
        float: left;
        width: 50%;
        margin-bottom: 30px;
    }

    .col-2 article:nth-child(2n+1),
    .col-3 article:nth-child(2n+1),
    .col-4 article:nth-child(2n+1),
    .col-5 article:nth-child(2n+1),
    .col-6 article:nth-child(2n+1) {
        clear: left;
    }

    .col-2 article:nth-last-child(-n+2),
    .col-3 article:nth-last-child(-n+2),
    .col-4 article:nth-last-child(-n+2),
    .col-5 article:nth-last-child(-n+2),
    .col-6 article:nth-last-child(-n+2) {
        margin-bottom: 0;
    }

    .footer-widgets-area.col-3 .hentry {
        width: 33.33%;
        float: left;
        margin-bottom: 0;
    }

    .footer-widgets-area.col-3 .hentry:not(:last-child) {
        padding-right: 40px;
    }

    .site-info.col-2 span {
        float: left;
        width: 50%;
        text-align: left;
    }

    .site-info.col-2 span:nth-child(2) {
        float: right;
        text-align: right;
    }

}*/

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

   /* .col-3 article,
    .col-5 article,
    .col-6 article {
        width: 33.33%;
    }

    .col-3 article:nth-child(2n+1),
    .col-5 article:nth-child(2n+1),
    .col-6 article:nth-child(2n+1) {
        clear: none;
    }

    .col-3 article:nth-child(3n+1),
    .col-5 article:nth-child(3n+1),
    .col-6 article:nth-child(3n+1) {
        clear: left;
    }

    .col-3 article:nth-last-child(-n+3),
    .col-5 article:nth-last-child(-n+3),
    .col-6 article:nth-last-child(-n+3) {
        margin-bottom: 0;
    }

    .col-4 article {
        width: 25%;
    }

    .col-5 article {
        width: 20%;
    }

    .col-6 article {
        width: 16.66%;
    }

    .col-4 article:nth-child(2n+1),
    .col-5 article:nth-child(3n+1),
    .col-6 article:nth-child(3n+1) {
        clear: none;
    }

    .col-4 article:nth-child(4n+1),
    .col-5 article:nth-child(5n+1),
    .col-6 article:nth-child(6n+1) {
        clear: left;
    }

    .col-4 article:nth-last-child(-n+4),
    .col-5 article:nth-last-child(-n+5),
    .col-6 article:nth-last-child(-n+6) {
        margin-bottom: 0;
    }*/

    /* #top-bar .widget+.widget {
        margin-top: 0;
    } */

    /*#top-bar.col-2 .widget {
        float: left;
        text-align: left;
        padding: 6px 0;
    }

    #top-bar.col-2 .widget+.widget {
        float: right;
        text-align: right;
        padding: 0;
    }

    nav.navigation.pagination {
        margin-top: 63px;
    }

    #colophon .social-icons {
        margin-left: -15px;
    }

    .footer-widgets-area.col-4 .hentry {
        width: 25%;
        padding-right: 40px;
    }

    .footer-widgets-area.col-4 .hentry:last-child {
        padding-right: 0;
    }

    .footer-widgets-area.col-4 .hentry:nth-child(2n+1) {
        clear: none;
    }

    .footer-widgets-area.col-4 .hentry:nth-child(4n+1) {
        clear: left;
    }

    .footer-widgets-area.col-4 .hentry:nth-last-child(-n+4) {
        margin-bottom: 0;
    }
}
@media screen and (min-device-width: 820px) and (max-device-width: 1024px) { 

    /*.entry-title, .section-title,#featured-team .entry-content{
        margin: 0;
    }*/

    #colophon .footer-widgets-area .widget_text ul li:nth-child(3){
        margin-left: 0;
    }*/

    /* inner page testimonial */
    /*.main-navigation ul.nav-menu>li>a{
        margin: 0 29px 0 0;
    }*/

    /* faq */
    /*#main .faqside{
        padding: 0;
    }

    #main .faqs-inner-content h2.faq-title:before{
        left:22px;
    }*/
    /*#colophon .widget-title{
        line-height: 30px;
    }*/

    /* team */
    /*#main .team-inner-content .entry-content{
        margin: 0 9px 0 0;
    }*/

    /* services */
    .main-navigation ul.nav-menu>li>a{
        margin: 0 8px 0 0;
    }
    #content .leftbox .contactformbox h1{
        padding: 10px 0 10px 0px;
    }
    #content .leftbox .contactformbox .contacttext{
        padding-top: 50%;
    }
    #content .infoboxinn .contact-text p{
        padding: 15px 0 0 0;
    }
    #content .infoboxinn .address-icon{
        height: 70px;
        width: 70px;
    }
    /* #content .contactform{
        padding-top: 22%;
    } */
    #featured-posts .button{
        padding: 8px 36px 7px 0px;
    }
    /* #main .entry-content h2{
        line-height: 0.1;
    } */
    /*#main .bloginn-inner-content .post-date{
        margin-bottom: 0rem;
    }
    #main .bloginn-inner-content .content{
        padding: 10px;
        margin-left: 32px;
    }*/
    
}

/*---------menu display above 1024 and 1024 screen-------------*/
@media screen and (min-width: 1024px) {
    .menu-sticky #masthead {
        position: sticky;
        top: 0;
    }

    .menu-sticky #masthead.nav-shrink {
        box-shadow: 0 6px 10px rgb(0 0 0 / 10%);
    }

    .customize-support.menu-sticky #masthead.nav-shrink {
        top: 32px;
    }

    /*---------menu css for home screen-------------*/
    .main-navigation {
        width: auto;
        /*float: right;*/
        position: relative;
        height: 100%;
    }

    .main-navigation.icons-active {
        padding: 0;
    }

    .main-navigation ul.nav-menu>li {
        text-align: center;
    }

    .main-navigation ul.nav-menu>li:last-child>a {
        margin: 0px 0px 0 0;
        color: #FFFFFF;
    }

    .main-navigation ul.nav-menu>li>a {
        position: relative;
        z-index: 10;
        transition: all 0.3s ease-in-out;
        font-weight: 400;
    }

    .main-navigation ul.nav-menu .current_page_item>a,
    .main-navigation ul.nav-menu .current-menu-item>a,
    .main-navigation ul.nav-menu .current_page_ancestor>a,
    .main-navigation ul.nav-menu .current-menu-ancestor>a{
        color: #fdc401;
    }

   
    .main-navigation ul.nav-menu>li:hover>a,
    .main-navigation ul.nav-menu>li.focus>a,
    .main-navigation ul ul li a:hover,
    .main-navigation ul ul li a.focus {
        color: #f6bb19;
    }

    .main-navigation ul.nav-menu>li {
        text-align: center;
        /*padding: 13px 0;*/
        position: relative;
        height: 100%;
        font-weight: bold
    }

    .main-navigation.icons-active ul.nav-menu>li {
        padding: 15px 25px 8px;
    }

    .main-navigation ul.nav-menu>.menu-item-has-children>a:after {
        content: "\f078";
        padding-left: 2px;
        font-size: 10px;
        position: relative;
        bottom: 5px;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
    }

    .main-navigation ul ul .menu-item-has-children>a:before {
        content: "\f067";
        font-size: 10px;
        position: relative;
        top: 20px;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        right: 15px;
    }

    .main-navigation ul.nav-menu {
        display: block !important;
        height: auto !important;
        position: relative;
        height: 100% !important;
    }

    .main-navigation ul ul {
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15);
        width: 250px;
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -ms-transform: translateY(20px);
        -o-transform: translateY(20px);
        transform: translateY(20px);
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }

    .main-navigation ul li:hover>ul,
    .main-navigation ul li.focus>ul {
        left: auto;
        right: 0;
        display: block !important;
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -o-transform: translateY(-5px);
        transform: translateY(-5px);
    }

    .main-navigation ul ul li:hover>ul,
    .main-navigation ul ul li.focus>ul {
        left: auto;
        right: 100%;
    }

    .main-navigation ul ul li:hover>a,
    .main-navigation ul ul li.focus>a {
        background-color: #01549a;
        color: #fff;
    }

    .main-navigation ul .sub-menu li:hover>a,
    .main-navigation ul .sub-menu li.focus>a {
        background-color: #01549a;
        color: #fff;
    }

    .main-navigation ul.sub-menu>li:last-child>a {
        border-bottom: none;
    }

    .main-navigation ul ul li {
        border-bottom: 1px solid #fff;
    }

    .main-navigation ul ul>li:last-child {
        border-bottom: none;
    }

    .main-navigation ul ul ul {
        top: 5px;
    }

    .main-navigation ul ul li a {
        color: #fff;
    }

    .main-navigation ul .sub-menu li a {
        color: #fff;
    }

    .main-navigation ul.nav-menu>li>a>i,
    .main-navigation ul.nav-menu>li>a>i.wpmi-icon:not(.wpmi-label-1).wpmi-position-before {
        display: block;
        margin: 0 auto 10px;
    }

    .menu-toggle {
        height: 80px;
        position: absolute;
        top: 50%;
        right: 35px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    #search {
        position: absolute;
        z-index: 30;
        right: 0;
        top: 100%;
        display: none;
    }

    .main-navigation .search-active .icon-search {
        display: none;
    }

    .main-navigation .search-active .icon-close {
        display: inline-block;
    }

    #search:before {
        content: "";
        width: 0;
        height: 0;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-bottom: 9px solid #111;
        position: absolute;
        top: -9px;
        right: 5px;
    }

    button.dropdown-toggle {
        display: none;
    }

    .menu-toggle {
        display: none;
    }

    .main-navigation ul {
        display: block;
    }

    .main-navigation li {
        display: inline-block;
    }

    .main-navigation .left-menu {
        padding-left: 50px;
    }

    .main-navigation li.left-menu+li.right-menu:before {
        content: "/";
        position: absolute;
        top: 50%;
        margin-left: -6px;
        color: #fff;
        margin-top: -1px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .main-navigation form.search-form {
        border: 20px solid #111;
    }

    .main-navigation form.search-form input {
        background-color: #fff;
        border-color: #fff;
        color: #111;
    }

    #featured-slider .entry-title {
        font-size: 68px;
        letter-spacing: normal;
        text-transform: uppercase;
        font-weight: 700;
    }
    .overlay-side {
        position: absolute;
        top: 0;
    }

    .right-sidebar #primary,
    .left-sidebar #primary {
        width: 70%;
        float: left;
        padding-right: 30px;
    }

    .right-sidebar #secondary,
    .left-sidebar #secondary {
        width: 30%;
        float: right;
    }

    .left-sidebar #primary {
        float: right;
        padding-right: 0;
        padding-left: 30px;
    }

    .no-sidebar #primary {
        width: 100%;
        float: none;
        padding-right: 0;
    }
}

/*@media screen and (min-width: 1900px) {

    .footer-widgets-area.section-gap {
        padding: 200px 0 100px;
    }
}*/

@media only screen and (max-width: 768px) {
/*#featured-slider .wrapper{
    top:55% !important;
}

#featured-slider .wrapper .d-flex {
    justify-content: center;
    align-items: center;
}*/

.content-site .md-0{
    display: none;
}

#section-header .content-site,#featured-faqs .faqside,#featured-faqs .titletext h1,#colophon p{
    padding: 0;
}
/*#featured-slider .entry-header{
    padding: 0 10px;
}*/
#section-header{
    margin-top: 0;
}
#colophon .footer-widgets-area .widget_text ul li:nth-child(3){
    margin-left: 0;
}
.bottomheader{
    padding: 4px 0;
}

#featured-slider .entry-header h3,.bottomheader,.entry-title, .section-title,#featured-posts .button{
    margin:0;
}

/*#featured-team .entry-content{
    position: relative;
}*/

/*#colophon .widget-title{
    height: 45px;
    line-height: 28px;
}*/

/* innear page testimonial */
/*#main .testimonial-inner-content,#main .faqside,#content .leftbox .contactformbox h1{
    padding: 0;
}*/
/*#main .faqs-inner-content .faq-content button.accordion{
    padding: 0px 0 0px 8px;
}
#main .faqs-inner-content .faq-content button.accordion .accordion-arrow{
    position: relative;
    padding: 33px 20px;
}
#main .faqs-inner-content .faq-content{
    margin-bottom: 20px;
}*/
/* faq */
/*#main .faqs-inner-content h2.faq-title:before{
    left:20px;
}*/
/*#main .bloginn-inner-content .content{
    padding: 10px;
}
#main .bloginn-inner-content .entry-contentbox p{
    margin-bottom: 0;
}
#main .bloginn-inner-content .content{
    margin-left: 20px;
}
#main .bloginn-inner-content .post-date{
    left:-2.7rem;
    bottom: 20rem;
}*/

#content .infoboxinn .address-icon{
    height: 60px;
    width: 60px;
}
#content .infoboxinn .contact-text{
    padding: 25px 5px;
}
#content .contactform .innershortcode{
    padding: 0 10px;
}
#content .leftbox .contactformbox .contacttext p{
    padding: 7px 0 0px 0;
}
#content .infoboxinn .contact-text p{
    padding: 15px 0 0 0;
}
#content .infoboxinn::before{
    margin: 10px 0 0px -6%;
}

    #masthead.site-header .main-navigation ul.nav-menu {
        width: auto;
        margin-right: 0;
        background-color: #fff;
        margin-top: 25px;
        border-top: 1px solid rgba(0, 0, 0, 0.10);
        position: absolute;
        top: 100%;
        left: auto;
        right: 0;
    }

    .header-main {
        height: auto;
        background: #c42118;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 6px 6px 6px 15px;
    }

    .content-site {
        border-radius: 10px;
    }

    /*#featured-slider .entry-container {
        position: absolute;
        top: 50%;
        width: 100%;
        left: 0;
        right: 0;
        text-align: center;
        padding: 0 30px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }*/

    .overlay-side {
        display: none;
    }

    .site-branding {
        min-height: 62px;
        display: flex;
        align-items: center;
    }

    /*#featured-slider .entry-title {
        margin-bottom: 0;
        font-size: 32px;
        color: #fff;
        text-transform: uppercase;
    }

    #featured-slider .entry-content {
        color: #fff;
        margin: 0 72px 0 5px;
        display: block;
    }*/
}

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

    #content .searchbar {
        padding: 0 30px;
    }

    /*#featured-about .aboutimgtext .aboutimgbg {
        display: none;
    }*/

    #featured-posts .title-section {
        padding: 0;
    }

    #colophon .searchbar h4 {
        border-radius: 10px;
    }

    /*#main .testimonial-inner-content .content-image {
        top: 0px;
        position: relative;
        left: 0px
    }

    #main .testimonial-inner-content .content-image{
        top: 0px;
        position: relative;
        left: 0px;
    }
  
    #main .testimonial-inner-content:hover h4.testimonials-title a::after{
        transition: .8s ease;
        animation: rotateY 1s linear infinite;
        margin-top: -10px;
    }
  
    #main .testimonial-inner-content .testimonials-details p::after,
    #main .testimonial-inner-content .testimonials-details::before{
        display: none;
    }
    #main .testimonial-inner-content{
        padding: 0x;
    }
    #main .testimonial-inner-content .content-image img{
        width: 100%;
        margin-left: 0;
    }*/

    /*#main .project-inner-content .project-image{
        width: 100%;
    }*/

    /*#main .gallerybox .gallery-inner-content:nth-child(5) {
        top: 0;
    }

    #main .faqcontactimg {
        padding-bottom: 3em;
    }

    #main .bloginn-inner-content .content-image img,
    #secondary .bloginn-inner-content .content-image img {
        margin-top: 0px;
    }*/

    #content .leftbox {
        padding: 20px 15px 10px 15px;
    }

    #content .infoboxinn {
        width: 95%;
    }

    #content .contactform {
        margin: 0;
        padding: 30px 20px;
    }

    /*#featured-slider .entry-header h3 {
        font-size: 12px;
    }

    #featured-slider h2.entry-title {
        font-size: 25px;
    }

    #featured-slider .entry-container,
    .slick-dotted.slick-slider {
        padding: 0;
    }*/

    .bottomheader {
        padding: 0;
    }

    #featured-posts .read-more a {
        justify-content: center;
    }

    .content-site p {
        font-size: 11px;
    }

    .content-site .social-links i {
        font-size: 17px;
    }

    #featured-posts .entry-content p {
        padding-right: 0em;
    }

    /*#featured-slider .entry-content {
        color: #fff;
        margin: 0 0px 0;
        display: block;
    }*/

    .site-logo img {
        width: auto;
    }

    .site-branding {
        padding-right: 0px !important;
    }

    .header-nav {
        display: block;
        float: none;
    }

    .contact-header {
        margin-right: 100px;
        width: auto;
        margin-left: 0;
        height: 100%;
    }

    #featured-posts .message-box .message-form p .wpcf7-spinner::before {
        left: 12.6rem;
    }
}

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

    /*#featured-projects .entry-content3 p.text-section {
        padding: 0;
    }*/

    .content-site .social-links {
        display: none;
    }

    #top-bar {
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

    #masthead {
        min-height: 86px;
    }

    .site-branding {
        /* padding-right: 50px; */
        min-height: 54px;
        display: flex;
        align-items: center;
    }

    .site-title {
        font-size: 26px;
    }

    .main-navigation ul ul {
        border-top: 1px solid rgba(0, 0, 0, 0.10);
    }

    .main-navigation ul ul ul {
        margin-top: 0;
    }

    .main-navigation ul.nav-menu li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.10);
        display: block;
        width: 100%;
    }

    .main-navigation ul.nav-menu li:last-child {
        border-bottom: none;
    }

    .main-navigation ul ul li a {
        padding-left: 35px;
        color: #fff;
    }

    .main-navigation ul ul ul li a {
        padding-left: 60px;
    }

    .main-navigation ul ul ul ul li a {
        padding-left: 80px;
    }

    .main-navigation ul ul a {
        width: 100%;
    }

    .main-navigation ul ul,
    .main-navigation ul ul ul {
        box-shadow: none;
        float: none;
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 0;
        display: none;
        z-index: 0;
    }

    .main-navigation .menu-item-has-children>a:before {
        content: "";
        float: right;
        position: relative;
        right: 0;
        background-color: rgba(255, 255, 255, 0.20);
        width: 1px;
        height: 25px;
    }

    .main-navigation .menu-item-has-children>a:after {
        padding-top: 3px;
    }

    .main-navigation ul.sub-menu li a {
        border-left: none;
    }

    /* .main-navigation ul.nav-menu {
        margin-right: 0;
        background-color: #fff;
        border-top: 1px solid rgba(0, 0, 0, 0.10);
    }

    .main-navigation {
        position: static;
    }

    .main-navigation a {
        color: #555555;
        padding: 12px 15px;
    }

    #masthead.site-header .main-navigation ul.nav-menu {
        margin-top: 0;
        position: absolute;
        max-width: 500px;
        top: 100%;
        left: auto;
        right: 0;
        width: auto;
        z-index: 10;
    } */


        .menu-toggle {
        width: 40px !important;
        height: 40px !important;
                top: -3rem;
        right: 0;
    }

    .menu-toggle span {
        width: 32px !important;
        height: 3px !important;
    }

    .main-navigation ul.nav-menu {
        position: fixed;
        width: 80%;
        background-color: #FFFFFF;
        transition: left 0.4s ease-in-out;
        top: 0%;
        left: 0;
        height: 100%;
        z-index: 0;
        align-content: center;
        overflow-y: auto;
    }

    .menu-toggle {
        position: absolute;
    }

    .menu-toggle.active {
        position: fixed;
             top: 3rem !important;
        right: 2rem !important;
        z-index: 10;
    }

    #section-header #form1 form {
        width: 100%;
    }

    .main-navigation .search-menu a {
        display: none;
    }

    .main-navigation form.search-form input {
        background-color: #fff;
        border: none;
        min-height: 55px;
    }

    .main-navigation form.search-form button.search-submit {
        height: 59px;
    }

    .main-navigation form.search-form input {
        padding-left: 25px;
    }

    .body-overlay #content,
    .body-overlay #colophon,
    .body-overlay .backtotop {
        filter: blur(25px);
    }
}

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

    .comments-title,
    #reply-title {
        font-size: 28px;
    }
}

@media screen and (max-width: 767px) {
    /*#content .entry-content {
    padding:1rem;
}*/

    #masthead.site-header .main-navigation ul.nav-menu {
        width: auto !important;
        margin-right: 0;
        background-color: #fff;
        margin-top: 25px;
        border-top: 1px solid rgba(0, 0, 0, 0.10);
        position: absolute;
        top: 100%;
        left: auto;
        right: 0;
    }

    #page-site-header .page-title {
        font-size: 32px;
    }

    #featured-classes .featured-classes-item,
    .blog-posts-wrapper .post-item{
        text-align: center;
    }

    .comment-navigation .nav-previous,
    .posts-navigation .nav-previous,
    .post-navigation .nav-previous,
    .comment-navigation .nav-next,
    .posts-navigation .nav-next,
    .post-navigation .nav-next {
        width: 100%;
        margin: 15px 0;
    }

    .post-navigation span.previous-article b,
    .post-navigations span.previous-article b,
    .post-navigation span.next-article b,
    .post-navigations span.next-article b {
        font-size: 18px;
    }

   /* #respond {
        margin-top: 40px;
    }*/

    .comment-meta img {
        margin-right: 15px;
    }

    .comments-title,
    #reply-title {
        margin-bottom: 8px;
    }

    #commentform p.comment-form-comment,
    #commentform p.form-submit {
        margin-top: 21px;
    }

    nav.navigation.pagination,
    #secondary {
        margin-top: 30px;
    }

    .comments-title,
    #reply-title {
        font-size: 26px;
    }

    #comments {
        margin-top: 40px;
    }

    .tags-links {
        margin-bottom: 25px;
    }

    .backtotop {
        display: none;
    }
    /*#featured-about .title-section {
    padding-right: 0 !important;
    }
    #featured-about h2.subtitle {
    margin: 0px 0 30px 0;
    }*/
}
@media screen and (min-width: 567px) and (max-width: 767px){
        .menu-toggle { 
             top: 0rem !important;
        right: 1rem !important;
        }
}

@media screen and (max-width: 567px) {
     .menu-toggle {   width: 40px !important;
        height: 40px !important;
        top: -3rem !important;
        right: 0rem !important;
             }
    .main-navigation ul.nav-menu {
        width: 100%;
    }

    .pagination .page-numbers.prev,
    .pagination .page-numbers.next {
        top: 0;
    }

    .pagination .prev.page-numbers:before,
    .pagination .next.page-numbers:before {
        width: 35px;
        height: 10px;
    }

    .pagination .page-numbers.prev,
    .pagination .page-numbers.next {
        margin-left: 0;
        margin-right: 0;
    }

    .trail-items li {
        font-size: 12px;
    }

    #breadcrumb-list {
        padding: 10px 0;
    }

    blockquote.alignright {
        margin-left: 0;
    }

    .comment-meta img {
        margin: 0 0 25px;
        float: none;
    }

    .comment-meta .url,
    .comment-meta .fn {
        display: block;
    }

    .comment-content {
        padding-left: 0;
    }

    #comments ol.children {
        margin-left: 50px;
    }

    .reply {
        padding-left: 0;
    }

    .footer-widgets-area .hentry:last-child,
    .footer-widgets-area.col-3 .hentry:last-child {
        margin-bottom: 0;
        padding-right: 0;
    }
}

/* mobile view */
@media screen and (min-device-width: 320px) and (max-device-width: 550px){
    #masthead{
        position: relative;
        min-height: auto;
    }

    #masthead .sidepadding{
        --bs-gutter-x: 0;
    }
    #featured-posts .post-date{
        bottom:11rem;
        left:-0.7rem;
    }
   
    /* inner page */

    /* faq */
    #main .image-container .image2 img,#main .image-container .image2::after{
        display: none;
    }
    #masthead .bottomheader .row{
        --bs-gutter-x:0;
    }
    #content .leftbox .contactformbox h1{
        padding: 10px 0% 10px 0px;
        font-size: 32px;
    }
    #content .infoboxinn::before{
        margin: 10px 0 0px -11%;
    }
    #content .infoboxinn .contact-text p{
        padding: 15px 0 0 0;
    }
    #content .rightbox-form .conct-header h1{
        margin: 0;
    }
    #content .contactform{
        padding: 30px 0;
    }
    #content .leftbox .contact-right-side{
        margin-top: 25px;
    }
    #content .infoboxinn .contact-text{
        padding: 25px 10px;
    }
    
    /*#featured-services .title-section p{
        padding-top: 25px;
        padding-bottom: 10px;
    }
    #featured-services .title-section{
        margin-bottom: 1em;
    }*/
    #featured-faqs .image-container .image2::after{
        display: none;
    }
    #featured-posts .message-box{
        top:25px;
    }
    #featured-posts .button a{
        padding: 10px 20px;
    }
    #featured-posts .button{
        padding: 8px 32px 7px 0px;
    }
    #featured-posts .button svg{
        right:5px;
    }

    #content .innershortcode input[type="submit"]{
        margin-top: 20px;
    }

    .menu-toggle span {
        width: 29px;
    }
}

@media screen and (max-device-width: 320px){
    /*#featured-slider .borderbtn{
        width: 100px !important;
    }
    #featured-slider .read-more .btn{
        padding: 12px 9px;
    }
    #featured-slider img{
        height: 100vh;
    }
    #featured-slider .entry-container{
        transform: translateY(-61%);
    }*/
    /*#featured-services .entry-title a{
        padding: 0px 9px 0px 9px;
    }*/
    /*#featured-pricings .circle{
        width: 265% !important;
        left: -211px !important;
        top: -269px !important;
    }*/
    /*#featured-projects .entry-content3 h5::before{
        position: absolute !important;
        left: 12px !important;
        top: -21px !important;
    }*/
    /*#featured-pricings .title-section h1::before{
        position: absolute !important;
        left: 34px !important;
        top: -24px !important;
    }*/
    /*#featured-team .title-section h1::after{
        position: absolute;
        left: 90%;
        top: 13px;
    }
    #featured-team .title-section h1{
        font-size: 35px;
    }*/
}

@media screen and (min-device-width: 600px) and (max-device-width: 1024px) and (orientation:landscape){
    /*#featured-slider .entry-header h3::before{
        left: -97px;
    }*/
    /*#featured-about .title-section .row h3{
        font-size: 17px  !important;
    }*/
    #featured-posts .button{
        padding: 8px 39px 7px 0px;
        margin: 0;
    }
    /* inner page testimonial */
    /*.main-navigation ul.nav-menu>li>a{
        margin: 0 13px 0 0;
    }*/
    #section-header .social-links a{
        margin: 10px 4px;
    }
    #main .bloginn-inner-content .content{
        padding: 8px;
        margin-left: 30px;
    }
    #main .bloginn-inner-content .post-date{
        left:-2.3rem;
    }
    .main-navigation ul.nav-menu .current_page_item>a, .main-navigation ul.nav-menu .current-menu-item>a, .main-navigation ul.nav-menu .current_page_ancestor>a, .main-navigation ul.nav-menu .current-menu-ancestor>a {
        padding: 5px 15px;
    }
}

@media (min-width:300px) and (max-width:700px){
    .main-navigation ul.nav-menu > li > a,
    .main-navigation ul.nav-menu>li:last-child>a {
        padding: 10px;
    }

    #section-header .site-logo img{
        width: 70%;
        height: 57.34px;
    }
    .main-navigation ul.nav-menu>li:last-child{
        width: fit-content;
        padding: 0;
        margin: 0 auto;
    }
    .main-navigation ul.nav-menu>li:last-child a{
        margin: 0;
        color: #fff;
    }
    .main-navigation ul.nav-menu,
    .main-navigation ul ul{
        text-align: center;
    }
    .scroll-to-top {
        right: 18px;
    }

    /*#featured-slider h2.title{
        font-size: 35px;
    }
    #featured-slider .entry-header{
        padding: 0;
    }
    #featured-slider .entry-container{
        margin-left: 1rem;
    }
    #featured-slider .slick-prev{
        left: 2%;
    }
    #featured-slider .wrapper {
        top: 39%;
    }
    #featured-slider .borderbtn{
        width: 80px;
    }
    #featured-slider img{
        height: 100vh;
    }*/
    
    /*#featured-about .about-image img{
        height: 500px !important;
    }
    #featured-about .image-top-box{
        width: auto;
        height: auto;
        top: -4rem;
        left: 0;
    }
    #featured-about .title-section h1{
        font-size: 35px !important;
    }
    #featured-about .aboutrightside .title-section .d-flex{
        margin-bottom: 15px;
    }
    #featured-about .aboutrightside{
        margin-left: 0;
    }*/
    /*#featured-services .gap-16 {
        gap: 2rem;
    }*/

    /*#featured-features .feature-img{
        margin-left: 0;
        width: 100%;
    }
    #featured-features .section-content{
        padding: 25px 0 0;
        margin-left: 0;
    }*/

    /*#featured-faqs .faq-margin{
        margin-left: 0;
    }

    #featured-faqs .contactmapbox iframe{
        padding: 0 0 30px;
    }

    #featured-faqs summary::after{
        margin: -1px 10px 0px 0px;
    }*/

    /*#featured-contact{
        background: #000;
    }
    #featured-contact .contact-margin{
        margin-top: 0;
    }
    #featured-contact .box1{
        top: 0;
    }
    #featured-contact .box2{
        top: 3rem;
    }
    #featured-contact .contactformdiv{
        margin-top: 20px;
        padding: 0% 4%;
        margin-left: 0;
        width: 100%;
    }
    #featured-contact .entry-content3 h5{
        margin-left: -25px;
    }*/

    /*#featured-pricings .circle{
        top: -214px;
        left: -105px;
    }
    #featured-pricings .featured-pricings-item:nth-child(2){
        transform: none;
    }*/

    /*#featured-testimonials .testimonials-heading{
        text-align: center;
        writing-mode: horizontal-tb;
        transform: rotate(0);
    }
 
    #featured-testimonials .expanded-view{
        flex-direction: column;
        justify-content: center;
        padding: 20px 0;
        margin: 12px 0 30px;
        width: 100%;
    }
    #featured-testimonials .expanded-image-container{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70%;
    }
    #featured-testimonials .expanded-image-container img{
        width: 80%;
        margin-bottom: 20px;
    }
    #featured-testimonials .expanded-text-container{
        text-align: center;
        padding: 0;
        width: 100%;
    }*/

    #featured-posts .post-date {
        letter-spacing: 1.4px;
        left: -2.5rem;
    }
    #featured-posts .gap-20{
        gap: 40px;
    }
    #featured-posts .entry-container{
        margin-left: 0;
    }
    #featured-posts .entry-contentbox{
        padding: 0px 28px 18px 14px;
    }

    #colophon .gap-16 {
        gap: 1rem;
    }
    #colophon .logo{
        margin-bottom: 15px;
    }
    #colophon .footerbox:first-child .hentry{
        width: 100%;
    }
    /* Inner Page */
    /*#page-site-header .page-header{
        top: 10rem;
    }*/
    #page-site-header .breadcrumbbox .button{
        padding: 0;
        /*gap: 40px;*/
    }
    #page-site-header .breadcrumbbox span.treeEnd{
        padding: 3px;
        line-height: 48px;
    }

    #page-site-header .breadcrumbbox .button .root, #page-site-header .breadcrumbbox span {
        padding: 10px 10px;
        width: fit-content;
       /* margin-bottom: 10px;*/
    }

    #main .service-inner-content .entry-title .service-title, #secondary .service-inner-content .entry-title .service-title{
        padding: 0 6px;
        font-size: 17px !important;
    }

    #main .image-container .image1 img{
        width: 100%;
        padding-right: 0;
    }
    
    #main .gallerybox .img4-parent{
        top: 0;
    }

    /*#main .testimonial-inner-content .testimonials-designation{
        margin: 0 0 32px;
    }
    #main .testimonial-inner-content .content-image img{
        bottom: 0;
    }*/
    #main .bloginn-inner-content .entry-contentbox, #secondary .bloginn-inner-content .entry-contentbox, #featured-posts-item .content{
        width: 100%;
        padding: 0 15px 18px;
    }
    #main .bloginn-inner-content .content-image img, #secondary .bloginn-inner-content .content-image img, #featured-posts-item .content-image img{
        width: 100%;
    }
    /*.widget_text input{
        margin: 0 0 16px 30px;
    }*/
    .entry-meta{
        display: grid;
        gap: 8px;
    }
    .socialMedia{
        float: left;
    }
    /*blockquote .wp-block-quote p, .wp-block-pullquote p, .wp-block-quote p{
        padding: 12px 0 0;
    }*/
    #main .entry-content ol li{
        padding-left: 3rem;
    }
    #main .entry-content ol li:before{
        left: 0;
    }
    #section-header{
        width: 100%;/*90-100%*/
        /*margin: 0px 5% 0px;*/
    }
    /*#featured-projects .entry-content .entry-text{
        width: 232px;
        padding: 18px 24px;
    }*/
    /*#featured-features .entry-content h2{
        margin: 55% 0 0 0;
    }*/
    /*#main .testimonial-inner-content{
        background: linear-gradient(180deg, #fff 81%, #01549a 63%);
    }
    #main .testimonial-inner-content .content-image{
        padding: 0 10px;
    }
    #main .testimonial-inner-content h4{
        margin: 16px 0 16px 0;
    }*/
    #primary .widget ul li a::before, #secondary .widget ul li a::before, #primary .widget ol li a::before, #secondary .widget ol li a::before{
        margin-right: 7px;
        margin-left: 0.5em;
    }
    #content .inquiry-screen{
        padding: 20px 12px;
    }
    #content .rightbox-form .conct-header hr{
        left: 1.3rem;
    }
    .error-404.not-found .error-404title{
        font-size: 162px;
    }
    /*#featured-projects .entry-content3 h5::before{
        position: absolute;
        left: 34px;
        top: -20px;
    }*/
    /*#featured-steps .section-content .steps-block{
        margin-top: 0;
        margin-bottom: 0;
        padding: 0 8px;
    }*/
    /*#featured-pricings .title-section h1{
        font-size: 37px;
    }
    #featured-pricings .cleaning-chemical{
        display: none;
    }*/
    /*#featured-team .title-section h1{
        font-size: 35px;
    }*/
    /*#featured-testimonials .client-single .content-image{
        width: 65%;
        margin: 0 auto;
    }*/
    #featured-posts .title-section h1{
        font-size: 35px;
    }
    #featured-posts .title-section h1::before{
        left: 20px;
        top: -25px;
        height: 41px;
    }
    #featured-posts .post-item{
        width: 100%;
        margin-bottom: 30px;
    }
}

/* ============================================= */
/*/////////////////// media query css for tab start ////////////////*/
@media (min-width:700px) and (max-width:912px) {
    .main-navigation ul.nav-menu > li > a,
    .main-navigation ul.nav-menu>li:last-child>a {
        padding: 10px;
    }
    .main-navigation ul.nav-menu>li>a{
        margin: 0;
    }
    .main-navigation ul.nav-menu>li:last-child{
        width: fit-content;
        padding: 0;
        margin: 0 auto;
    }
    .main-navigation ul.nav-menu>li:last-child a{
        margin: 0;
        color: #fff;
    }
    .main-navigation ul.nav-menu,
    .main-navigation ul ul{
        text-align: center;
    }
    #page-site-header .page-header{
        top: 10rem;
    }
    #page-site-header .breadcrumbbox .button{
        display: flex;
        /* flex-direction: column; */
    }

    #page-site-header .breadcrumbbox span.treeEnd-margin{
        margin-left: -26px;
    }
    #content .inquiry-screen{
        padding: 20px 13px;
    }
    #page-site-header .breadcrumbbox .button .root, #page-site-header .breadcrumbbox span{
        width: fit-content;
        /*margin-bottom: 10px;*/
    }
    .site-description {
        padding: 0px;
    }

.opbg{
    height: fit-content;
}

/*#featured-slider .wrapper {
    top: 28%;
}
#featured-slider h2.title{
    font-size: 55px;
}
#featured-slider .entry-header h3{
    margin: 0;
}
#featured-slider h2.entry-title{
    line-height: 1;
}

#featured-slider .entry-content{
    margin: 0 72px 0 18px;
}
#featured-slider .wrapper .d-flex{
    justify-content: start;
    margin-left: 18px;
}
#featured-slider .slick-next{
    left: 17.5%;
}
#featured-slider img{
    height: 100vh;
}*/
/*#featured-about .image-top-box{
    width: 149px;
    height: 78px;
    top: -2.3rem;
    left: -3.2rem;
}
#featured-about .image-top-box .top-box-num{
    font-size: 22px !important;
}
#featured-about .image-top-box .top-box-text{
    font-size: 11px !important;
}
#featured-about .title-section{
    margin-bottom: 0;
}
#featured-about .title-section h5{
    font-size: 17px !important;
}

#featured-about .title-section h1{
    font-size: 24px !important;
}
#featured-about h2.subtitle{
    margin: 0 0 30px 0;
    font-size: 14px !important;
}
#featured-about .title-section .about-service p{
    font-size: 14px !important;
}
#featured-about .title-section .cleaning-text{
    gap: 9px;
}
#featured-about .title-section .cleaning-text p{
    font-size: 12px !important;
}
#featured-about .title-section .cleaning-text svg, #featured-about .title-section .cleaning-text i{
    font-size: 23px !important;
}
#featured-about .button-content{
    margin: 7% 0 0 0;
    padding: 8px 15px;
}
#featured-about .button-content a{
    font-size: 14px !important;
}
#featured-about .button-content i, #featured-about .button-content svg{
    font-size: 15px !important;
}
#featured-about .aboutrightside{
    margin-left: 0;
}*/
/*#featured-services .gap-16 {
    gap: 2rem;
}*/

/*#featured-features .features-block{
    padding: 31px 15px;
}
#featured-features .featuresbox .features-icon{
    font-size: 40px;
}
#featured-features .featuresbox .circle{
    width: 58px;
    height: 58px;
}
#featured-features .featuresbox{
    padding: 0 0 0px;
}
#featured-features h4.features-title{
    margin: 6px 0 10px;
}
#featured-features .featuresbox .features-icon i, #featured-features .featuresbox .features-icon svg{
    margin: 0 0 0 18px;
}*/

/*#featured-steps .gap-20{
    gap: 2rem;
}

#featured-steps .section-content .steps-block .steps-icon{
     left: 3.4rem; 
    width: 118px;
    height: 118px;
}
#featured-steps .section-content .steps-block .stepsbox .steps-no{
    margin-top: -30px;
}
#featured-steps .section-content .steps-block h4 a{
    font-size: 17px;
}
#featured-steps .section-content .steps-block .stepsbox .steps-text{
    font-size: 16px;
    padding: 19px 20px;
}
#featured-steps .section-content .steps-block:nth-child(2) .steps-icon{
    width: 134px;
    height: 134px;
}
#featured-steps .section-content .steps-block{
    margin-top: 20px;
}*/

/*#featured-faqs .faq-margin{
    margin-left: 0;
}*/

/*#featured-contact .contact-margin{
    margin-top: 280px;
}
#featured-contact .box1{
    top: 14.5rem;
}
#featured-contact .box2{
    top: 17.2rem;
}
#featured-contact .box3{
    bottom: 0;
}
#featured-contact .box4{
    bottom: 2.8rem;
}
#featured-contact .box5{
    bottom: 1.7rem;
}
#featured-contact .entry-content3 h5{
    margin-left: -25px;
}
#featured-contact .contactformdiv{
    margin-left: 0;
    width: 100%;
}*/
/*#featured-pricings .circle{
    width: 280%;
    top: -19rem;
    left: -188px !important;
}
#featured-pricings .cleaning-chemical{
    display: none;
}*/

/*#featured-testimonials .expanded-text-container{
    width: 74%;
}
#featured-testimonials .expanded-image-container{
    width: 30%;
}*/

#featured-posts .gap-20{
    gap: 1rem;
}
#featured-posts .entry-meta{
    padding: 6px 0 0;
}
#featured-posts .entry-meta .d-flex{
    gap: 12px;
    padding-left: 6px;
}
/*#featured-posts .px-3{
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
}*/
#featured-posts .entry-contentbox{
    padding: 20px 0;
}
#featured-posts .entry-contentbox .entry-title{
    margin: 0 5px 15px;
}
#featured-posts h2.entry-title a{
    font-size: 18px;
}
#featured-posts .posts-date{
    padding: 12px 0 0 5px;
}
#featured-posts .posts-date .arrow-up{
    margin-right: 1rem;
}

#featured-clients .gap-20{
    gap: 2rem;
}

#colophon .social-links a {
    margin: 13px 10px;
}
#colophon .widget_nav_menu ul li a{
    font-size: 16px;
}
#colophon .logo{
    margin-bottom: 15px;
}

#main .gallery-image p{
    padding: 24px 19px;
}

/*#main .testimonial-inner-page.gap-20{
    gap: 2rem;
}
#main .testimonial-inner-content .testimonials-designation{
    margin: 0 0 25px;
}
#main .testimonial-inner-content .content-image img{
    bottom: 5px;
}*/
.widget .menu{
    width: 100%;
    padding-left: 0;
}
/*.widget_text input{
    width: 90%;
    margin: 0 10px 16px;
}*/
#secondary .widget ul li a::after, #secondary .widget ol li a::after{
    content: '. . . . . .';
}
.post-navigation a, .posts-navigation a{
    margin-bottom: 10px;
}

/*#main .projectmainbox .gap-14{
    gap: 1.5rem;
}*/
#main .entry-content .gallery-image p{
    padding: 24px 18px 24px;
}
/*#main .testimonial-inner-content{
    background: linear-gradient(180deg, #fff 80%, #01549a 63%);
}
#main .testimonial-inner-content h4{
    margin: 20px 0 16px 0;
}*/
#primary ul li a, #secondary ul li a{
    font-size: 14px;
}
#primary .widget ul li a::before, #secondary .widget ul li a::before, #primary .widget ol li a::before, #secondary .widget ol li a::before{
    margin-left: 0.2em;
    margin-right: 4px;
}
/*#secondary .widget .menu-services-container ul li a::after, #secondary .widget .menu-our-services-container ul li a::after{
    right: 0;
}*/
#content .rightbox-form .conct-header hr{
    left: 1.3rem;
}
/*#featured-features .entry-content h2{
    margin: 46% 0 0px 0px;
}
#featured-features .feature-img{
    width: 100%;
}
#featured-features .section-content{
    margin-left: 0;
}*/
/*#main .gallerybox .gallery-inner-content .gallery-box{
    width: 100%;
}*/
}

/* ============================================= */
/*/////////////////// media query css for laptop start ////////////////*/
@media (min-width:1023px) and (max-width:1024px) {
    .main-navigation ul.nav-menu > li > a{
        padding: 5px 4px;
        font-size: 13px;
    }
    .main-navigation ul.nav-menu>li>a{
        margin-right: 10px;
    }
    .main-navigation ul.nav-menu>li>a{
        font-size: 14px;
    }
    .main-navigation ul.nav-menu>li:last-child{
        padding: 6px 3px;
    }
    .main-navigation ul.nav-menu>li:last-child>a{
        font-size: 15px;
    }
    .site-description{
        padding: 0;
    }
    /*#featured-slider h2.entry-title {
        font-size: 36px;
        line-height: 1.5;
    }
    .main-navigation ul.nav-menu > li > a{
        padding: 5px 4px;
    }

    #featured-slider h2.title{
        font-size: 40px;
    }
    #featured-slider .slick-next{
        left: 15.5% !important;
    }*/
    /*#featured-about .image-top-box{
        width: auto;
        height: auto;
        top: -2rem;
        left: -5rem;
    }*/

    /*#featured-services .gap-16 {
        gap: 2rem;
    }

    #featured-services .entry-title a{
        font-size: 14px;
        padding: 0 0 0 4px;
    }*/

    /*#featured-steps .section-content .steps-block .stepsbox .steps-no{
        margin-top: -34px;
    }
    #featured-steps .gap-20{
        gap: 2rem;
    }*/

    /*#featured-contact .box1{
        top: 12rem;
    }
    #featured-contact .box2{
        top: 14.8rem;
    }*/

    /*#featured-pricings .circle{
        top: -227px !important;
        left: -98px !important;
    }*/

    /*#featured-team .entry-content {
        padding: 10px 15px;
    }
    #featured-team .gap-5{
        gap: 1rem !important;
    }*/

     /*#featured-testimonials .swiper-slide .content-image .image-container{
        width: 100%;
     }
     #featured-testimonials .client-single.active .client-img{
        transform: scaleY(2.2) scaleX(1) !important;
     }
     #featured-testimonials .client-comment{
        left: 32rem !important;
        width: 711px !important;
     }*/

     #featured-posts .gap-20{
        gap: 1rem !important;
     }
    #featured-clients .gap-20{
        gap: 2rem;
    }
    #colophon .logo{
        margin-bottom: 15px;
    }
    #colophon .social-links {
        margin-top: 15px;
    }
    #colophon .footer-widgets-area .widget_text ul li:nth-child(2), #colophon .footer-widgets-area .widget_text ul li:nth-child(4), #colophon .footer-widgets-area .widget_text ul .list-email {
        margin-left: 0rem;
    }
    #colophon .gap-16 {
        gap: 2rem;
    }
    .site-description {
        padding: 0px;
    }
    #page-site-header .page-header{
        top: 12rem;
    }
    #page-site-header .breadcrumbbox .button{
        display: flex;
        /* flex-direction: column; */
    }

    #page-site-header .breadcrumbbox .button .root, #page-site-header .breadcrumbbox span{
        width: fit-content;
        /*margin-bottom: 10px;*/
    }
    #page-site-header .breadcrumbbox span.treeEnd-margin{
        margin-left: -25px;
    }
    .navigation.post-navigation,
    .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next{
        padding: 0;
    }
    .comment-navigation .nav-links, .posts-navigation .nav-links, .post-navigation .nav-links{
        display: flex;
        flex-direction: column;
    }
    .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous{
        margin-bottom: 15px;
    }

    #main .service-inner-content .entry-title .service-title, #secondary .service-inner-content .entry-title .service-title{
        padding: 0 11px;
    }
    #main .gallerybox{
        margin: 30px auto;
    }

    #secondary .grid.gap-20{
        gap: 2rem;
    }
    #main .bloginn-inner-content .content-image img, #secondary .bloginn-inner-content .content-image img, #featured-posts-item .content-image img{
        width: 100%;
    }
    #main .bloginn-inner-content .entry-contentbox, #secondary .bloginn-inner-content .entry-contentbox, #featured-posts-item .content{
        width: 100%;
        /* padding: 0px 6px 18px; */
    }

    #main .column-gap{
        column-gap: 2rem;
    }

    /*#main .faqs-inner-content .faq-content button.accordion{
        padding: 0 0 0 12px;
    }
    #main .faqs-inner-content .faq-content button.accordion .accordion-arrow{
        padding: 20px;
        position: relative;
    }*/
    /*.widget_text input{
        margin: 0 30px 16px;
    }*/
    #section-header{
        width: 100%;
        /*margin: 0px 5% 0px;*/
    }

   /* #featured-projects .entry-content .entry-text{
        width: 192px !important;
        padding: 18px 20px;
    }
    #featured-projects .entry-content .entry-text a{
        font-size: 20px;
    }*/
    #content .rightbox-form .conct-header hr{
        left: 1.3rem;
    }
}

/* ============================================= */
@media (min-width:1024px) and (max-width:1366px) {
    .site-description {
        padding: 0px;
    }
    /*#page-site-header .page-header{
        top: 12rem;
    }*/
    #page-site-header .breadcrumbbox .button{
        display: flex;
        /* flex-direction: column; */
    }

    #page-site-header .breadcrumbbox .button .root, #page-site-header .breadcrumbbox span{
        width: fit-content;
        /*margin-bottom: 10px;*/
    }
    #page-site-header .breadcrumbbox span.treeEnd-margin{
        margin-left: -25px;
    }
    .navigation.post-navigation,
    .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next{
        padding: 0;
    }
}

#featured-faqs button.gm-control-active{
    background-color: #01549a !important;
}

/* ============================================= */
/*/////////////////// media query css for laptop start ////////////////*/
@media (orientation: landscape) and (max-width:1440px) {
    #featured-posts .message-box .message-form p .wpcf7-spinner::before{
        left: 16.2rem;
    }
    /*#featured-pricings .circle{
        left: -140px;
    }*/
    /*#featured-testimonials .client-single.active .client-img{
        transform: scaleY(2.2) scaleX(1.3);
    }
    #featured-testimonials .client-comment{
        left: 36rem;
    }*/
    .post-navigation a, .posts-navigation a{
        margin-bottom: 8px;
    }

    /*#featured-projects .entry-content .entry-text{
        width: 279px;
    }*/
}


/*#content #featured-about {
 padding: 1rem 0 4rem 0;
}*/
/*#content #featured-pricings {
 padding: 4rem 0 2rem 0;
}
#content .entry-content {
    box-shadow: 0px 0px 38px #00000029;
    padding: 2rem 2rem;
}
#content #featured-pricings .pcontaint ul li::before{
        transform: rotate(0deg);
    margin: 0;
}
#content #featured-pricings .pcontaint ul li{
        padding: 0;
}
#content #featured-pricings h2.entry-title{
      line-height: 20px !important;
          padding: 0px 20px 12px 20px;
}*/
/*.home #content .entry-content {
    display: none !important;
}*/

/*#main .entry-content .socialMedia ul li:before{
    display: none !important;
}
#main .entry-content .socialMedia ul li {
    line-height: 28px !important;
}*/
/* Blog Section Styling */
/* Full Width Wrapper for Background */
#featured-posts
{
    background-color: #f9f9f9 !important;
}
#featured-posts .featured-blog-wrapper {
    padding: 80px 20px;
    width: 100%;
}

/*.container {
    max-width: 1320px; */ /* default 1140 hota hai */
/*}*/

/* Header Styling (Hatayi hui inline CSS yahan hai) */
#featured-posts .header-column {
    margin-bottom: 50px;
}

#featured-posts .blog-subtitle {
    color: #ff5e14;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    display: block;
    letter-spacing: 1px;
}

#featured-posts .section-main-title {
    font-weight: 800;
    color: #002e5b;
    font-size: 36px;
    margin-top: 10px;
}

/* Card Styling */
#featured-posts .custom-blog-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0px 5px 20px rgba(0,0,0,0.05);
    transition: all 0.4s ease-in-out;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 480px;
}

#featured-posts .custom-blog-card:hover {
    transform: translateY(-12px);
    box-shadow: 0px 15px 35px rgba(0,0,0,0.12);
}

/* Image zoom effect */
#featured-posts .featured-image-holder {
    overflow: hidden;
}

#featured-posts .featured-image-holder img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

#featured-posts .custom-blog-card:hover .featured-image-holder img {
    transform: scale(1.08);
}

#featured-posts .entry-container-custom {
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#featured-posts .entry-meta-top {
    font-size: 14px;
    color: #888;
    margin-bottom: 15px;
    display: flex;
    gap: 20px;
}

#featured-posts .entry-meta-top i,.entry-meta-top svg {
    color: #666 !important;
    margin-right: 8px;
}

#featured-posts .entry-title-custom {
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: auto;
    font-weight: 700;
}
/*CARD TITLE*/
#featured-posts .entry-title-custom a {
    color: #002e5b;
    text-decoration: none;
    transition: color 0.3s;
}

#featured-posts .custom-blog-card:hover .entry-title-custom a {
    color: #1F51FF;
}


/* Read More & Hover Effect */
#featured-posts .read-more-wrapper {
    margin-top: 25px;
}

/* Read More */
#featured-posts .read-more-btn {
    color: #1F51FF;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

#featured-posts .custom-blog-card:hover .read-more-btn {
    color: #ff5e14; /* Orange on Hover */
}

#featured-posts .custom-blog-card .read-more-btn i,.custom-blog-card .read-more-btn svg {
    color: #1F51FF;
    font-size: 14px;
    transition: transform 0.3s ease;
}

#featured-posts .custom-blog-card:hover .read-more-btn i,.custom-blog-card:hover .read-more-btn svg {
    transform: translateX(5px);
    color: #ff5e14;
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    #featured-posts .custom-blog-card {
        min-height: auto;
    }
    #featured-posts .section-main-title {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    #featured-posts .featured-blog-wrapper {
        padding: 50px 20px;
    }
    #featured-posts .entry-title-custom {
        font-size: 19px;
    }
}
/* ===============================
   CONTACT SECTION
================================*/

#featured-contact {
    padding: 120px 0;
    background: #f5f7fb;
}
#featured-contact .contact-left {
    padding-top: 10px;
}

#featured-contact .contact-small-title {
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: 600;
    color: #8b95a7;
    display: block;
    margin-bottom: 20px;
}

#featured-contact .contact-main-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    color: #0b2c4d;
    margin-bottom: 25px;
    max-width: 410px;
}

#featured-contact .contact-desc {
    font-size: 17px;
    color: #5c6b7c;
    margin-bottom: 40px;
    max-width: 500px;
}

#featured-contact .contact-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

#featured-contact .contact-box {
    display: flex;
    align-items: center;
    gap: 18px;
}

#featured-contact .contact-icon {
    width: 60px;
    height: 60px;
    background: #2B82FB;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
}

#featured-contact .contact-box span {
    display: block;
    font-size: 14px;
    color: #8b95a7;
}

#featured-contact .contact-box a {
    font-size: 18px;
    font-weight: 700;
    color: #0b2c4d;
    text-decoration: none;
}

/* FORM SIDE */

#featured-contact .contact-form-box {
    background: #ffffff;
    padding: 50px;
    border-radius: 30px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.08);
}

/* CF7 */

#featured-contact .wpcf7 input,
#featured-contact .wpcf7 select,
#featured-contact .wpcf7 textarea {
    width: 100%;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    margin-bottom: 20px;
    font-size: 15px;
}

#featured-contact .wpcf7 input:focus,
#featured-contact .wpcf7 select:focus,
#featured-contact .wpcf7 textarea:focus {
    border: 2px solid #2563eb !important;
    outline: none !important;
}

#featured-contact .wpcf7 textarea {
    min-height: 70px !important;
}

#featured-contact .custom-submit-btn {
    width: 100%;
    background: #1660FF;
    color: #fff;
    padding: 16px 26px;
    font-size: 14px;
    border-radius: 40px;
    border: none;
    font-weight: 600;
    cursor: pointer;

    /* Sabse important fixes yahan hain */
    display: flex !important;      /* Force flex mode */
    align-items: center !important; /* Vertical center */
    justify-content: center !important; 
    gap: 10px;
    line-height: 0 !important;      /* Box ki height se text ko center karne ke liye */
    height: 50px;                  /* Fixed height dene se alignment perfect rehti hai */
    outline: none;
}

/* Text aur Icon ko individual line-height se azad karne ke liye */
#featured-contact .custom-submit-btn i, 
#featured-contact .custom-submit-btn svg {
    display: inline-block;
    line-height: 1;
    font-size: 16px;
    margin: 0;
    padding: 0;
    transition: transform 0.3s ease;
    /* Agar icon abhi bhi 1px upar lage toh niche wali line uncomment karein */
    /* position: relative; top: 1px; */
}

/* Hover Effect */
#featured-contact .custom-submit-btn:hover i {
    transform: translateX(6px);
}

#featured-contact .custom-submit-btn:hover {
    background: linear-gradient(135deg, #2563eb, #1e40af) !important;
}

/* ===============================
   RESPONSIVE
================================*/

@media(max-width:991px){

    #featured-contact {
        padding: 80px 20px;
    }

    #featured-contact .contact-main-title {
        font-size: 36px;
    }

    #featured-contact .contact-right {
        margin-top: 50px;
    }

    #featured-contact .contact-form-box {
        padding: 35px;
    }

}

@media(max-width:576px){

    #featured-contact .contact-main-title {
        font-size: 30px;
    }

    #featured-contact .contact-icon {
        width: 50px;
        height: 50px;
    }

}

/* ===============================
   FEATURED TESTIMONIALS
=============================== */

#featured-testimonials .webnotick-testimonials-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 50%, #e0f7f4 100%) !important;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

#featured-testimonials .testimonial-header .section-subtitle {
    color: #ff6b35;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-size: 14px;
}

#featured-testimonials .testimonial-header h2 {
    font-size: 42px;
    font-weight: 800;
    color: #0a1d37;
    margin: 10px 0;
}

#featured-testimonials .testimonial-header p{
    color:#888 !important;
    font-size: 18px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 600;
}

#featured-testimonials .testimonial-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    margin: 30px 0;
    position: relative;
    opacity: 0.5; /* Side cards are faded */
    transform: scale(0.9);
    color:#000;
}

/* Yellow Circle Position Fix */
#featured-testimonials .quote-badge {
    position: absolute;
    top: -25px; /* Thoda upar adjust kiya taki text ke beech na aaye */
    right: -15px;
    background: #ffcc00;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    z-index: 999;        /* Taaki ye hamesha sabse upar rahe */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* Thoda heavy shadow depth ke liye */

}

/* 2. Text Content Styling (Spacing fix) */
#featured-testimonials .testimonial-card .content-full {
    display: block;
    font-size: 17px;
    line-height: 1.8;      /* Line spacing thodi aur badhayi */
    word-spacing: 3px;     /* Word spacing set ki */
    margin-bottom: 30px;
    padding-right: 10px;   /* Ab text circle ke niche nahi dabe ga */

}

/* Active (Blue) Card Styling */
/* Active (Blue) Card Styling - Updated for Spacing */
#featured-testimonials .swiper-slide-active .testimonial-card {
    background: linear-gradient(180deg, #0056fb 0%, #009999 100%) !important; 
    color: #ffffff !important;
    opacity: 1;
    transform: scale(1.05);
    
    /* Heights and Spacing Fix */
    min-height: auto !important;       /* Isse extra bottom space khatam ho jayega */
    padding-top: 20px !important;      /* Top space kam karne ke liye */
    padding-bottom: 20px !important;   /* Bottom space kam karne ke liye */
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important; 
    overflow: visible !important;
    z-index: 10;
    border: none;
}

/* Yellow circle ko active card mein wapas corner par lane ke liye */
#featured-testimonials .swiper-slide-active .quote-badge {
    position: absolute !important;
    top: -25px !important;
    right: -15px !important;
    background: #ffcc00;
    width: 65px !important;
    height: 65px !important;
    display: flex !important;
    border-radius: 50% !important;
    color: #fff ;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}

/* Active card ke andar ka main text (5-6 lines) */

#featured-testimonials .swiper-slide-active .content-full {
    color: #ffffff ;
    font-size: 17px;
    line-height: 1.6;
    word-spacing: 2px;
    margin-top: 0 !important;          /* Text bilkul upar se shuru hoga */
    margin-bottom: 15px !important;    /* Text aur footer ke beech ka gap kam kiya */
    padding-right: 15px;
    text-align: left;
}
/* Name/Title color fix for active card */

#featured-testimonials .swiper-slide-active .user-details h4 {
    color: #ffffff;
}

/* Designation aur Profession color fix for active card */
#featured-testimonials .swiper-slide-active .user-lines .designation,
#featured-testimonials .swiper-slide-active .user-lines .user-profession {
    color: #ffffff;
    opacity: 0.9;
}

#featured-testimonials .user-info {
    display: flex;
    align-items: center;
    margin-top: 25px;
}
/* Footer (User Info) ka extra top margin hatane ke liye */
#featured-testimonials .swiper-slide-active .user-info {
    margin-top: 5px !important;        /* Footer ko text ke kareeb lane ke liye */
}
/* Title ko space dene ke liye */
#featured-testimonials .user-details h4 {
    margin-bottom: 10px;
    font-size: 24px;
    display: block;
}

/* Image aur Lines ko side-by-side karne ke liye */
#featured-testimonials .user-main {
    display: flex;
    align-items: center; /* Vertical center alignment */
}

#featured-testimonials .user-img img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 5px solid #fff;
    margin-right: 15px; /* Image ke right side mein gap */
}

/* Dono lines ko stack karne ke liye */
#featured-testimonials .user-lines {
    display: flex;
    flex-direction: column;
}

#featured-testimonials .user-lines .designation {
    font-size: 18px;
    font-weight: 600;
}

#featured-testimonials .user-lines .user-profession {
    font-size: 14px;
    margin-bottom: 2px;
}

#featured-testimonials .user-lines .location {
    font-size: 14px;
    opacity: 0.8;
}

/*Active card address Icon */
#featured-testimonials .swiper-slide-active .location i , 
#featured-testimonials .swiper-slide-active .location svg{
    color: #ff007f !important;
    margin-right: 8px; /* Icon aur text ke beech thoda gap */
    font-size: 14px; /* Icon ka size adjust karne ke liye */
    vertical-align: middle;
}

/* --- Default (Sab Cards ke liye) --- */
#featured-testimonials .testimonial-card .content-full { display: block; }
#featured-testimonials .testimonial-card .content-short { display: none; }

/* --- INACTIVE SLIDES (Side wale cards) --- */

#featured-testimonials .swiper-slide:not(.swiper-slide-active) .testimonial-card {
    opacity: 0.6;
    transform: scale(0.9);
    background: #fff !important;
    color: #444 !important;
}

#featured-testimonials .swiper-slide:not(.swiper-slide-active) .content-full { display: none !important; }
/* Side cards (White ones) text styling */
#featured-testimonials .swiper-slide:not(.swiper-slide-active) .content-short {
    color: #666666 !important; /* Grey color for side cards */
    font-size: 15px;
    line-height: 1.5;
}

/* 2. Side cards mein sirf Location hide rahegi */
#featured-testimonials .swiper-slide:not(.swiper-slide-active) .location {
    display: none !important;
}

/* 3. Name aur Profession hamesha dikhte rahenge */
#featured-testimonials .swiper-slide:not(.swiper-slide-active) .user-details h4,
#featured-testimonials .swiper-slide:not(.swiper-slide-active) .user-profession {
    display: block !important;
}

/* Sab kuch dikhao active card mein */
#featured-testimonials .swiper-slide-active .content-full { display: block !important; }
#featured-testimonials .swiper-slide-active .content-short { display: none !important; }
#featured-testimonials .swiper-slide-active .location { display: block !important; }

/* Controls Center Fix */
#featured-testimonials .testimonial-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 20px;
}

#featured-testimonials .swiper-button-prev-custom, .swiper-button-next-custom {
    width: 50px; height: 50px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    color: #0056fb; transition: 0.3s;
}

#featured-testimonials .swiper-button-prev-custom:hover, .swiper-button-next-custom:hover {
    background: #0056fb; color: #fff;
}

/* Pagination Dots */

#featured-testimonials.swiper-pagination-custom { position: relative !important; width: auto !important; bottom: 0 !important; }

#featured-testimonials .swiper-pagination-custom .swiper-pagination-bullet { width: 10px; height: 10px; background: #cbd5e0; opacity: 1; }

#featured-testimonials .swiper-pagination-custom .swiper-pagination-bullet-active { width: 25px; border-radius: 5px; background: #0056fb; }



/* Swiper container ke bahar jo bhi card ka hissa ja raha hai use chhupa do */
#featured-testimonials .testimonialSwiper {
    overflow: hidden !important;
    padding: 20px 0 60px 0 !important; /* Top/Bottom padding for shadows */
    position: relative;
}

/* Slides ki width ko fix karein taaki gaps na banein */
#featured-testimonials .testimonialSwiper .swiper-slide {
   opacity: 1 !important; /* Saare cards ek jaise dikhenge */
    visibility: visible !important;
}

/* Agar aapka blue card abhi bhi bada dikh raha hai toh use normal rakhein */
#featured-testimonials .testimonialSwiper .swiper-slide-active .testimonial-card {
    transform: scale(1); /* Scale 1 karne se wo side wale cards jaisa hi dikhega */
}
/* --- INACTIVE SLIDES (Side wale cards) --- */

/* 1. Side cards ka basic look aur text size kam karne ke liye */
#featured-testimonials .swiper-slide:not(.swiper-slide-active) .testimonial-card {
    opacity: 0.6;
    transform: scale(0.9);
    background: #fff !important;
    color: #444 !important;
    padding-top: 20px; /* Top space kam kiya */
}

/* 2. Yellow circle ko corner se hata kar text ke left mein lane ke liye */
#featured-testimonials .swiper-slide:not(.swiper-slide-active) .quote-badge {
    position: relative; /* Absolute se Relative kiya */
    top: 0;
    right: 0;
    margin-bottom: 15px; /* Text se gap */
    background: transparent; /* Background hataya jaisa screenshot 2 mein hai */
    width: auto;
    height: auto;
    display: block; /* Left alignment ke liye */
    box-shadow: none;
    color: #0a1d37; /* Quote icon ka color blue kiya (ya light blue) */
    font-size: 30px; /* Quote icon ka size */
}

/* Icon change for inactive cards (jaisa screenshot 122319 mein hai) */
#featured-testimonials .swiper-slide:not(.swiper-slide-active) .quote-badge i::before {
    content: "\f10d"; /* FontAwesome left quote icon */
    opacity: 0.3; /* Light dikhane ke liye */
}

/* 3. Inactive cards ke text (5-6 lines) ka size kam karne ke liye */
#featured-testimonials .swiper-slide:not(.swiper-slide-active) .content-short {
    display: block !important;
    color: #888888 !important; /* Grey color */
    font-size: 14px; /* Size kam kiya */
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Inactive card mein full content hide rahega */
#featured-testimonials .swiper-slide:not(.swiper-slide-active) .content-full { 
    display: none !important; 
}

/* 4. Inactive cards ke footer text ka size adjustment */
#featured-testimonials .swiper-slide:not(.swiper-slide-active) .user-details h4 {
    font-size: 18px !important; /* Name chota kiya */
    color: #888 !important; /* Name blue jaisa screenshot mein hai */
}

#featured-testimonials .swiper-slide:not(.swiper-slide-active) .designation {
    font-size: 14px !important;
    color: #0a1d37 !important;
    font-weight: 600;
}

#featured-testimonials .swiper-slide:not(.swiper-slide-active) .user-profession {
    font-size: 12px !important;
    color: #aaa !important;
}

#featured-testimonials .swiper-slide:not(.swiper-slide-active) .user-img img {
    width: 45px; /* Profile image choti ki */
    height: 45px;
}

/* ===============================
    STRICT RESPONSIVE LOGIC (FIXED)
=============================== */

/* Default: Side cards ko hide rakhein */
#featured-testimonials .swiper-slide:not(.swiper-slide-active) {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
    /* Transition ko sirf opacity par rakhein, isse wo left jata hua nahi dikhega */
    transition: opacity 0.3s ease-in-out, visibility 0.3s !important;
}

/* Active card hamesha dikhega */
#featured-testimonials .swiper-slide-active {
    opacity: 1 !important;
    visibility: visible !important;
    /* Isse active card swap hote waqt smooth lagega */
    transition: opacity 0.4s ease-in-out !important;
}

/* Sabse important fix: Slide movement ko hide karne ke liye */
@media (max-width: 1023px) {
    #featured-testimonials .swiper-slide {
        /* Jab slide active nahi hai, toh use screen par render hi mat hone do swap ke waqt */
        transition: opacity 0.2s ease !important;
    }
    
    #featured-testimonials .swiper-slide:not(.swiper-slide-active) .testimonial-card {
        display: none !important; /* Mobile/Standard par pichla card left nahi jayega, seedha hide ho jayega */
    }
    
    #featured-testimonials .swiper-slide-active .testimonial-card {
        display: block !important;
    }
}

/* --- Specific Devices: iPad Pro, Nest Hub (Yahan 3 cards dikhane hain) --- */
@media (min-width: 1024px) {
    #featured-testimonials .swiper-slide:not(.swiper-slide-active) {
        opacity: 0.6 !important; 
        visibility: visible !important;
        pointer-events: auto;
        transform: scale(0.9);
    }
    
    /* Yahan display block wapas karna zaroori hai */
    #featured-testimonials .swiper-slide:not(.swiper-slide-active) .testimonial-card {
        display: block !important;
    }

    #featured-testimonials .swiper-slide-active {
        transform: scale(1.05);
    }
}

/* --- Mobile/Tablet Quote Badge Corner Fix --- */
@media (max-width: 1023px) {
    
    /* 1. Section par overflow hidden rakhein taaki swapping clean rahe */
    #featured-testimonials .webnotick-testimonials-section {
        overflow: hidden !important;
        padding-top: 50px !important;
    }

    /* 2. Swiper container ko side se space dein taaki badge screen ke bahar na jaye */
    #featured-testimonials .testimonialSwiper {
        overflow: visible !important; 
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
    }

    /* 3. Card ki width ko thoda kam karein taaki side gaps mein badge adjust ho jaye */
    #featured-testimonials .testimonial-card {
        width: calc(100% - 20px) !important;
        margin: 40px auto 20px auto !important;
    }

    /* 4. Badge ko ekdum corner par set karein bina kate */
    #featured-testimonials .swiper-slide-active .quote-badge {
        position: absolute !important;
        top: -30px !important;
        /* Ise -15px hi rakhein taaki wo corner se bahar nikle jaisa aapko chahiye */
        right: -10px !important; 
        
        /* Mobile ke liye size thoda sa kam taaki balance rahe */
        width: 60px !important;
        height: 60px !important;
        font-size: 22px !important;
        display: flex !important;
        z-index: 999 !important;
    }
}

/* ===============================
   TEAM SECTION PREMIUM DESIGN
=============================== */

#featured-team {
    padding: 60px 20px;
    overflow: hidden;
    background: #ffffff;
}

#featured-team .title-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
    width: 100%;
}

/* Alignment Classes */
#featured-team .title-section.align-center { align-items: center; text-align: center; }
#featured-team .title-section.align-left { align-items: flex-start; text-align: left; }
#featured-team .title-section.align-right { align-items: flex-end; text-align: right; }

#featured-team .small-sub-title {
    color: #ff6b35; 
    font-weight: 700; 
    display: block; 
    margin-bottom: 10px; 
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
}

#featured-team .main-title {
    color: #0a1d37;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

/* --- CARD STYLING --- */
#featured-team .featured-team-item {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.4s ease; /* Smooth transition ke liye */
    border: 1px solid rgba(0,0,0,0); /* Pehle se invisible border taki hover pe jump na kare */
    overflow: hidden;
    position: relative;
    padding-bottom: 8px;
}

/* 1. Image Zoom Effect Setup */
#featured-team .imagediv {
    overflow: hidden; /* Zoom image ko box ke bahar jane se rokega */
    border-radius: 15px 15px 0 0;
}
#featured-team .image-container {
    width: 100%;
    height: 280px;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease; /* Zoom ki speed */
}

#featured-team .entry-content,
#featured-team .social-links-wrapper {
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

/* --- HOVER EFFECTS --- */

/* 2. Border Color on Hover (Screenshot ke mutabiq) */
#featured-team .featured-team-item:hover {
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    border-color: #00d2b4; /* Screenshot wala light green/teal color */
    transform: translateY(-5px); /* Halki si lift */
}

#featured-team .content-image {
    display: flex;
    flex-direction: column;
}

/* Image Zoom on Hover */
#featured-team .featured-team-item:hover .image-container {
    transform: scale(1.1); /* 10% zoom */
}

/* Bottom Orange Line (Jo pehle set ki thi) */
#featured-team .featured-team-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 5px;
    background-color: #ff6b35;
    border-radius: 10px 10px 0 0;
    z-index: 3;
}

/* --- CONTENT ALIGNMENT --- */
#featured-team .entry-content {
    padding: 30px 20px;
    background: #ffffff;
    position: relative;
    z-index: 2;
}

#featured-team .entry-title a {
    color: #0a1d37 !important;
    font-size: 18px !important; 
    font-weight: 800 !important;
    margin-bottom: 6px;
    display: block;
    text-decoration: none;
}

#featured-team .team-designation-text {
    color: #888 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin-bottom: 20px !important;
    display: block;
}

/* Social Icons Wrapper */
#featured-team .social-links-wrapper {
    display: flex;
    width: 100%;
}

#featured-team .entry-content.align-center .social-links-wrapper { justify-content: center; }
#featured-team .entry-content.align-left .social-links-wrapper { justify-content: flex-start; }
#featured-team .entry-content.align-right .social-links-wrapper { justify-content: flex-end; }

#featured-team .social-links {
    display: flex;
    gap: 12px;
}

/* =======================================
   SOCIAL ICONS BOX & PERFECT CENTER FIX
   ======================================= */

/* 1. Link container: Ise Flex banaya hai taaki icon center rahe */
#featured-team .social-links a {
    width: 36px !important;   /* Thoda size chota kiya hai better look ke liye */
    height: 36px !important;
    background-color: #f8f9fa !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    display: inline-flex !important; 
    align-items: center !important;    /* Vertical center */
    justify-content: center !important;  /* Horizontal center */
    text-decoration: none !important;
    transition: all 0.3s ease;
    overflow: hidden !important;
    line-height: 0 !important;         /* Line height reset */
}

/* 2. Icon Reset: Font family aur size ko fix kiya */
#featured-team .social-links a i , .social-links a svg {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important;
    font-size: 16px !important;
    color: #555 !important;
    display: inline-block !important;
    line-height: 1 !important;         /* Icon ki apni height 1 honi chahiye */
    width: auto !important;
    /*height: auto !important;*/
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* 3. Ghost Box Killer: Purane version ke box ko hatane ke liye */
#featured-team .social-links a i::before, .social-links a svg::before {
    display: inline-block !important;
    margin: 0 !important;
    width: auto !important;
}

/* 4. Extra Space/Pseudo Elements Removal */
#featured-team .social-links a::before, 
#featured-team .social-links a::after,
#featured-team .social-links a i::after , #featured-team .social-links a svg::after{
    display: none !important;
    content: none !important;
}

/* 5. Hover State */
#featured-team .social-links a:hover {
    background-color: #ff6b35 !important;
    border-color: #ff6b35 !important;
}

#featured-team .social-links a:hover i , .social-links a:hover svg {
    color: #ffffff !important;
}

/* Text Case Utilities */
.case-uppercase { text-transform: uppercase; }
.case-capitalize { text-transform: capitalize; }
.case-none { text-transform: none; }

/* Grid logic */
#featured-team .team-section-content {
    display: grid;
    gap: 30px;
    padding: 10px 5px;
}

#featured-team .featured-team-item:hover {
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
#featured-team * {
    box-sizing: border-box;
}

#featured-team .imagediv,
#featured-team .entry-content {
    width: 100%;
    flex-shrink: 0;
}
/* Responsive */
@media (max-width: 768px) {
    #featured-team .main-title { font-size: 30px; }
    #featured-team .team-section-content {
        grid-template-columns: 1fr !important;
    }
}


/* ==================================================
   FEATURED PRICINGS SECTION
================================================== */

#featured-pricings {
    padding: 100px 0;
    background: linear-gradient(135%, #e6f9f9 0%, #f8fdff 15%);
    font-family: inherit;
}

#featured-pricings .container {
    max-width: 1200px;
    margin: auto;
    padding: 0 15px;
}

/* =========================
   HEADING
========================= */

#featured-pricings .pricing-heading {
    text-align: center;
    margin-bottom: 60px;
}

#featured-pricings .pricing-heading .sub-title {
    display: inline-block;
    color: #ff6b35;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

#featured-pricings .pricing-heading h2 {
    font-size: 42px;
    font-weight: 800;
    color: #0a1d56;
}

/* =========================
   GRID
========================= */

#featured-pricings .pricing-grid {
    display: flex;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}



/* =========================
   CARD
========================= */

#featured-pricings .pricing-card {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 45px 35px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.06);
    transition: all .35s ease;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
}

#featured-pricings .pricing-card:hover {
    box-shadow: 0 35px 80px rgba(0,0,0,0.1);
}

/* Bottom Color Strip Inside Card */
#featured-pricings .pricing-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20px;        /* gap from left */
    right: 20px;       /* gap from right */
    height: 8px;
    background: linear-gradient(90deg, #00C4CC 0%, #008B9B 100%);
    border-radius: 4px;   /* slight rounding only */
}


/* 2nd Card Orange Strip */
#featured-pricings .pricing-card.popular::after {
    background: linear-gradient(90deg, #FF6D00 0%, #E65100 100%);
}


/* =========================
   ICON BOX - EXACT DESIGN
========================= */

/* ICON BOX MODERN STYLE */
#featured-pricings .icon-box {
    width: 100px;
    height: 100px;
    margin: 0 auto 30px;
    border-radius: 25px;
    background: #008B9B;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* INNER WHITE SHAPE */
#featured-pricings .icon-box::before {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    /*background: #ffffff;*/
    border-radius: 18px;
}
#featured-pricings .icon-box:hover{
    transform: scale(1.1); /* 10% zoom */
    background: #00C4CC;
}
/* ICON IMAGE */
#featured-pricings .icon-box i, .icon-box svg  {
    width: 55px;
    position: relative;
    z-index: 2;
    font-size: 40px;
    color: #ffffff !important;
}

/*#featured-pricings .icon-box.orange i {
    color: #ffffff !important;
}*/


/* ORANGE VARIANT */
#featured-pricings .icon-box.orange {
    background: linear-gradient(145deg, #ff7a18, #ff5500);
}

#featured-pricings .icon-box.orange:hover{
    transform: scale(1.1); /* 10% zoom */
   background: #FF6D00; 
}

/* =========================
   TITLE
========================= */

#featured-pricings .pricing-card h3 {
    font-size: 28px;
    font-weight: 800;
    color: #0a1d56;
    margin-bottom: 20px;
}

/* =========================
   PRICE
========================= */

#featured-pricings .price {
    margin-bottom: 30px;
}

#featured-pricings .price .currency {
    font-size: 20px;
    vertical-align: top;
    color:#555;
    font-weight: 600;
    position: relative;
    top: 18px;
}

#featured-pricings .price .amount {
    font-size: 64px;
    font-weight: 800;
    color: #008B9B;
}

#featured-pricings .price .duration {
    display: block;
    font-size: 14px;
    color: #777;
    font-weight:500;
    margin-top: 8px;
    margin-bottom: 18px;
}

#featured-pricings .price::after {
    content: "";
    display: block;
    width: 90%;
    height: 1px;
    background: #e3e7f0;
    margin: 0 auto;
}
#featured-pricings .price.highlight .amount {
    color: #FF6600;
}

/* =========================
   FEATURES
========================= */

#featured-pricings .features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
}

/* Feature List Layout */
#featured-pricings .features li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 17px;
}

/* Circle Base */
#featured-pricings .feature-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #D1F8EF;  /* Teal for 1 & 3 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon inside */
#featured-pricings .feature-icon i , .feature-icon svg {
    font-size: 12px;
    color: #008B8B;
}

#featured-pricings .feature-icon-2 i, .feature-icon-2 svg{
   font-size: 12px;
    color: #FF5100; 
}
/* 2nd Card Different Color */
#featured-pricings .feature-icon-2 {
   background-color: #FFEDE1  /* Orange */
}

/* Optional hover polish */
#featured-pricings .features li:hover .feature-icon {
    transform: scale(1.08);
    transition: 0.3s ease;
}


/* =========================
   BUTTON
========================= */

#featured-pricings .pricing-btn {
    display: inline-block;
    padding: 14px 70px;
    border-radius: 15px;
    background: linear-gradient(90deg, #00C4CC 0%, #008B9B 100%);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
}

#featured-pricings .pricing-btn:hover {
    background: linear-gradient(to right, #009b95 0%, #00738c 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

#featured-pricings .pricing-btn.orange {
    background: linear-gradient(90deg, #FF6D00 0%, #E65100 100%);
}

#featured-pricings .pricing-btn.orange:hover {
    color: #fff;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to bottom, #e34105 0%, #ba3500 100%);
    transform: translateY(-2px);
}

/* =========================
   EXACT RIBBON WITHOUT CLIP-PATH
========================= */

#featured-pricings .pricing-card {
    box-sizing: border-box !important;
    position: relative;
    overflow: hidden;
}

#featured-pricings .ribbon {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #FF6600;
    color: #fff;
    /* Padding kam ki hai box ko chota karne ke liye */
    padding: 6px 25px 6px 35px; 
    font-size: 12px; /* Font thoda chota kiya hai balance ke liye */
    font-weight: 800;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;

    /* Left side bilkul seedha (0), Right side card ke radius se match karne ke liye */
    /* Agar card ka radius 18px hai, toh top-right ko 18px rakhein */
    border-radius: 0 15px 0 0; 
}

/* 1. LEFT SIDE 3D FOLD (Niche wala dark triangle) */
#featured-pricings .ribbon::before {
    content: "";
    position: absolute;
    left: 0;
    top: 100%; /* Ribbon ke theek niche */
    width: 0;
    height: 0;
    border-style: solid;
    /* Isse left side par 3D fold banega */
    border-width: 0 16px 16px 0; 
    border-color: transparent #9c4100 transparent transparent;
}

/* 2. BOTTOM RIGHT FOLD (Wrap-around shadow) */
#featured-pricings .ribbon::after {
    content: "";
    position: absolute;
    right: 0;
    top: 100%; /* Ribbon ke theek niche */
    width: 0;
    height: 0;
    border-style: solid;
    /* Dark triangle for 3D effect */
    border-width: 16px 16px 0 0;
    border-color: #9c4100 transparent transparent transparent; 
}

/* BEST VALUE (Yellow Variant) */
#featured-pricings .ribbon.best {
    background: #f0b400;
}

#featured-pricings .ribbon.best::after {
    border-color: #8c6a00 transparent transparent transparent;
}
#featured-pricings .ribbon i, .ribbon svg {
    font-size: 14px;
}

/* =========================
   POPULAR CARD SPECIAL
========================= */

#featured-pricings .pricing-card.popular {
   border: 2px solid #ff7a18;


}

/* =========================
   FOOTER GUARANTEE
========================= */

#featured-pricings .pricing-footer {
    margin: 60px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 15px 30px;
    background: #f0f7ff;
    border-radius: 50px;
    font-size: 18px;
    width: fit-content;
    max-width: 100%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

#featured-pricings .pricing-footer i , .pricing-footer svg {
    color: #008B8B; /* Agar font icon hai */
    fill: #008B8B;  /* Agar SVG icon hai */
    font-size: 16px;
    margin-right: 4px;
}

#featured-pricings .footer-normal {
    color: #666;
}

#featured-pricings .footer-bold {
    font-weight: 600;
    color: #111;
}
/* Make footer text behave like normal inline text */
#featured-pricings .pricing-footer {
    flex-wrap: wrap;
    text-align: center;
}

#featured-pricings .footer-normal,
#featured-pricings .footer-bold {
    display: inline;
}

/* Small mobile adjustment */
@media (max-width: 575px) {
    #featured-pricings .pricing-footer {
        padding: 12px 18px;
        font-size: 13px;
    }
}

/* ==================================================
   RESPONSIVE
================================================== */

/* 3 Columns on Large Tablets & iPads */
@media (max-width: 1024px) and (min-width: 768px) {
    #featured-pricings .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 2 Columns only for small tablets */
@media (max-width: 767px) and (min-width: 576px) {
    #featured-pricings .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 1 Column for Mobile */
@media (max-width: 575px) {
    #featured-pricings .pricing-grid {
        grid-template-columns: 1fr;
        display: contents;
    }
}

@media (max-width: 767px) {
    #featured-pricings {
        padding: 70px 0;
    }

    #featured-pricings .pricing-grid {
        grid-template-columns: 1fr;
    }

    #featured-pricings .pricing-heading h2 {
        font-size: 32px;
    }

    #featured-pricings .price .amount {
        font-size: 44px;
    }
}

/* iPad Mini Pixel Rounding Fix */
@media (max-width: 1024px) and (min-width: 768px) {

    #featured-pricings .pricing-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

/* =====================================
   FEATURED PROJECT SECTION
===================================== */
#featured-project{
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 120px 0;
    background: #f8faff;
}
#featured-project .project-container{
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ---------- TOP AREA ---------- */

#featured-project .project-top-area{
    text-align:center;
    margin-bottom:70px;
}

#featured-project .project-subtitle{
    display:inline-block;
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#ff7a00;
    margin-bottom:12px;
}

#featured-project .project-title{
    font-size:42px;
    font-weight:800;
    margin-bottom:18px;
    color:#0a1d56;
}

#featured-project .project-description{
    max-width:600px;
    margin:auto;
    color:#6b6b6b;
    margin-bottom:35px;
}

/* ---------- FILTER BUTTONS ---------- */

#featured-project .project-filters{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

#featured-project .project-filters button{
    border:none;
    padding:8px 22px;
    border-radius:50px;
    background:#f5f5f5;
    color: #000;
    cursor:pointer;
    font-size:14px;
    font-weight:700;
    transition:0.3s ease;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

#featured-project .project-filters button:hover,
#featured-project .project-filters button.active{
    background:#0a1d56;
    color:#fff;
    text-decoration: none !important;
}


/* ---------- GRID ---------- */

#featured-project .project-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

/* ---------- CARD ---------- */

#featured-project .project-card{
    position:relative;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:0.4s ease;
}

#featured-project .project-card:hover{
    transform:translateY(-8px);
}

/* ---------- IMAGE ---------- */

#featured-project .project-image{
    position:relative;
    height:330px;
    overflow:hidden;
}

#featured-project .image-container{
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
    transition:0.6s ease;
}

#featured-project .project-card:hover .image-container{
    transform:scale(1.1);
}

/* ---------- DARK GRADIENT OVERLAY ---------- */

#featured-project .project-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,0.75), transparent)!important;
    opacity:0;
    transition:0.4s ease;
}

#featured-project .project-card:hover .project-overlay{
    opacity:1;
}

/* ---------- TITLE AREA ---------- */

#featured-project .project-content{
    position:absolute;
    bottom:25px;
    left:25px;
    color:#fff;
    z-index:2;
    transition:0.3s ease;
}

#featured-project .project-content h3{
    font-size:22px;
    font-weight:600;
    margin:0;
    color:#fff;
}

/* LOCATION TEXT */
#featured-project .project-location{
    font-size:14px;
    color:#E5E7EB;       
}

/* LOCATION ICON */
#featured-project .project-location i,
#featured-project .project-location svg{
    font-size:14px;
    color:#E5E7EB;
    margin-right:6px;
}


#featured-project .project-card:hover .project-content{
    bottom:35px;
}


/* ---------- FEATURED STAR ---------- */

#featured-project .project-category-badge{
    position:absolute;
    top:20px;
    left:20px;
    background:#ffcc00;
    color:#000;
    padding:6px 16px;
    border-radius:20px;
    font-size:13px;
    font-weight:700;
    z-index:3;
}


#featured-project .project-featured-star{
    position:absolute;
    top:20px;
    right:20px;
    background:#00c853;
    color:#fff;
    padding:6px 14px;
    border-radius:20px;
    font-size:13px;
    display:flex;
    gap:6px;
    align-items:center;
    z-index:3;
}

/* ---------- HOVER BUTTON ---------- */

#featured-project .project-hover-btn{
    margin-top:14px;
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    transition:all 0.4s ease;
}

#featured-project .project-card:hover .project-hover-btn{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

#featured-project .project-hover-btn a{
    background:#fff;
    padding:12px 18px;          /* 👈 height & width dono kam */
    border-radius:30px;       /* 👈 slimmer pill */
    color:#0a1d56;
    font-size:14px;           /* 👈 text chhota */
    font-weight:600;
    display:inline-flex;      /* 👈 button tight rahe */
    gap:6px;                  /* 👈 icon paas */
    align-items:center;
    text-decoration:none;
    line-height:1;            /* 👈 extra height remove */
}

#featured-project .project-hover-btn a:hover{
    background:#ffcc00;
    color:#0a1d56;
}

#featured-project .project-hover-btn a i, .project-hover-btn a svg{
    font-size:13px;
}

/* ---------- VIEW ALL BUTTON ---------- */

#featured-project .project-view-all{
    text-align:center;
    margin-top:60px;
}

#featured-project .project-view-all a{
    display:inline-block;
    padding:13px 40px;
    background:#000;
    color:#fff;
    border-radius:50px;
    font-weight:600;
    text-decoration:none;
    transition:0.3s ease;
}

#featured-project .project-view-all a:hover{
    background:#1A232E;
    color:#fff;
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* ==============================
   TABLET (768px – 1024px)
============================== */

@media (max-width: 1024px) {

    #featured-project .project-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    #featured-project .project-title {
        font-size: 36px;
    }

    #featured-project .project-image {
        height: 280px;
    }

}

/* ==============================
   MOBILE (Below 768px)
============================== */

@media (max-width: 767px) {

    #featured-project .project-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    #featured-project .project-top-area {
        margin-bottom: 50px;
        padding: 0 15px;
    }

    #featured-project .project-title {
        font-size: 28px;
        line-height: 1.3;
    }

    #featured-project .project-description {
        font-size: 14px;
    }

    #featured-project .project-image {
        height: 240px;
    }

    #featured-project .project-content {
        bottom: 20px;
        left: 20px;
    }

    #featured-project .project-content h3 {
        font-size: 18px;
    }

    #featured-project .project-hover-btn a {
        padding: 10px 16px;
        font-size: 13px;
    }

    #featured-project .project-view-all {
        margin-top: 40px;
    }

    #featured-project .project-view-all a {
        padding: 12px 30px;
        font-size: 14px;
    }

}

/* ================= PROCESS SECTION ================= */
#featured-steps{
    padding:120px 0;
    background:linear-gradient(135deg,#eef6ff,#ffffff);
    position:relative;
    /*margin-top:20px;*/
}
#featured-steps .steps-container{
    max-width:1320px;
    margin:0 auto;
    padding:0 15px;
}

#featured-steps .process-small-title {
    color:#ff7a00;
    font-weight:600;
    font-size: 14px;
    text-transform:uppercase;
}

#featured-steps .process-title {
    font-size:44px;
    font-weight:800;
    color:#0a1d37;
    margin:12px 0;
}

#featured-steps .process-desc {
    max-width:640px;
    margin:0 auto;
    font-size:18px;
    color:#666;
}

/* ================= CARDS ================= */

#featured-steps .process-cards{
    display:flex;
    justify-content:center;
    align-items:stretch;
    gap:50px;
    position:relative;
    z-index:2;
    margin-top:60px;
    flex-wrap:wrap;
}

#featured-steps .step-box{
    background:#fff;
    padding:70px 40px;
    border-radius:26px;
    text-align:center;
    position:relative;
    min-height:360px;
    box-shadow:0 25px 60px rgba(0,0,0,.08);
    width:340px;
    transition:all .35s ease;
}

#featured-steps .step-box{
    transition:all .35s ease;
}

/* HOVER */
#featured-steps .step-box:hover{
    transform:translateY(-15px);
    box-shadow:0 45px 90px rgba(0,0,0,.12);
}

/* icon zoom */
#featured-steps .step-box:hover .step-icon{
    transform:scale(1.15);
}

/* number box straighten */
#featured-steps .step-box:hover .step-no{
    transform:translate(-35%, -35%) rotate(0deg) scale(1.1);
}


/* STEP NUMBER */
#featured-steps .step-no{
    position:absolute;
    top:0;
    left:0;
    transform:translate(-35%, -35%) rotate(12deg);  /* 👈 MAGIC LINE */
    width:62px;
    height:62px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    color:#fff;
    font-weight:700;
    z-index:2;
}


#featured-steps .step-no-1 { background:#1E62F3; }
#featured-steps .step-no-2 { background:#00A99D; }
#featured-steps .step-no-3 { background:#F7941D; }

/* ICON BOX */
#featured-steps .step-icon {
    width:82px;
    height:82px;
    margin:0 auto 28px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    transition:all .35s ease;
}

#featured-steps .step-icon-1 { background:#edf2ff; color:#2563ff; }
#featured-steps .step-icon-2 { background:#e8fbf5; color:#00b894; }
#featured-steps .step-icon-3 { background:#fff3e6; color:#ff7a00; }

/* TEXT */
#featured-steps .step-title {
    font-size:22px;
    font-weight:700;
    color:#0a2540;
    margin-bottom:12px;
}

#featured-steps .step-text{
    font-size:18px;
    line-height:1.8;
    color:#6b7c93;
    display:-webkit-box;
    -webkit-line-clamp:3;   /* 👈 3 lines */
    -webkit-box-orient:vertical;
    overflow:hidden;
    max-width:260px;        /* 👈 text width control */
    margin:0 auto;
}


/* LINE */
#featured-steps .step-line {
    display:block;
    width:48px;
    height:4px;
    border-radius:4px;
    margin:28px auto 0;
}

#featured-steps .step-line-1 { background:#2563ff; }
#featured-steps .step-line-2 { background:#00b894; }
#featured-steps .step-line-3 { background:#ff9f00; }

/* ================= CTA ================= */

#featured-steps .process-bottom {
    margin-top:70px;
}

/* INLINE CTA WRAPPER */
#featured-steps .process-cta-inline{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;                  /* BUTTON <-> OR <-> PHONE spacing */
    flex-wrap:wrap;
}

/* BUTTON */
#featured-steps .process-btn {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 38px;
    border-radius:40px;
    background:linear-gradient(90deg,#2563ff,#00b894);
    color:#fff;
    font-weight:600;
    text-decoration:none;
    transition:all .3s ease;
}

#featured-steps .process-btn i, #featured-steps .process-btn svg {
    font-size:16px;
}

#featured-steps .process-btn:hover{
    transform:scale(1.07);
    box-shadow:0 18px 40px rgba(37,99,255,.35);
}

/* OR TEXT */
#featured-steps .process-cta-text{
    font-size:16px;
    color:#6b7c93;
    font-weight:500;
    margin:0 4px;              /* fine spacing like screenshot */
}

/* PHONE TEXT */
#featured-steps .process-phone-inline{
    display:inline-flex;
    align-items:center;
    gap:8px;                   /* icon <-> text normal */
    cursor:pointer;
    font-weight:700;
    font-size: 18px;
    color:#1E62F3;
    transition:all .35s ease;
}

#featured-steps .process-phone-inline i, .process-phone-inline svg{
    transition:all .35s ease;
}

/* HOVER EFFECT (like screenshot) */
#featured-steps .process-phone-inline:hover{
    color:#263ff5;
    gap:14px;                  /* hover par spacing */
}

#featured-steps .process-phone-inline:hover i, #featured-steps .process-phone-inline:hover i{
    /*color:#263ff5;*/
    transform:translateX(-3px) scale(1.15);
}
/**Backside arrow**/

/* 1. Container alignment fix */
#featured-steps .process-cards {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 50px;
    position: relative; 
    z-index: 5;
    margin-top: 60px;
}

/* 2. Arrow Line aur Head (Ab nahi kategi) */
#featured-steps .process-cards::before {
    content: "";
    position: absolute;
    top: 22%;
    left: 0;
    width: 100%;
    height: 120px;
    pointer-events: none;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: contain;
}

#featured-steps .process-cards::after{
    content:"";
    position:absolute;
    top:22%;
    left:50%;
    transform:translateX(-50%);
    width:58% !important;                 /* 🔥 yahin magic hai */
    height:120px;
    z-index:1;
    pointer-events:none;
    background-repeat:no-repeat;
    background-size:100% auto;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60,80 C250,-20 450,150 620,80 T760,80' stroke='%23f4b23d' stroke-width='3' stroke-dasharray='10 10' fill='none'/%3E%3Cpath d='M750,75 L770,80 L750,85' fill='%23f4b23d'/%3E%3C/svg%3E");
}

/* 3. Step Box Fix */
#featured-steps .step-box {
    position: relative;
    z-index: 10;
    background: #ffffff !important; /* Piche ki line chhupane ke liye solid background */
    box-shadow: 0 25px 60px rgba(0,0,0,.08);
}

/* 4. Mobile Responsiveness */
@media (max-width: 991px) {
    #featured-steps .process-cards::before {
        display: none; /* Mobile par line ajeeb lagti hai */
    }
}
/* ================= FINAL RESPONSIVE ================= */

/* ====== LARGE LAPTOPS (<= 1399px) ====== */
@media (max-width: 1399px){
    #featured-steps .process-title{ font-size:40px; }

    #featured-steps .step-box{
        width:320px;
        padding:64px 34px;
    }

    #featured-steps .process-cards{ gap:40px; }

    #featured-steps .process-cards::after{
        width:62%;
    }
}

/* ====== TABLETS / FOLDS (iPad, Surface, Nest Hub) ====== */
@media (min-width: 768px) and (max-width: 1180px){

    #featured-steps .process{
        padding:90px 0;
    }

    #featured-steps .process-title{
        font-size:34px;
    }

    /* 🔥 FORCE 3 CARDS IN ONE LINE */
    #featured-steps .process-cards{
        flex-wrap:nowrap;
        gap:24px;
    }

    #featured-steps .step-box{
        width:31%;
        padding:56px 26px;
        min-height:340px;
    }

    /* arrow adjust */
    #featured-steps .process-cards::after{
        width:70%;
        top:24%;
    }
}

/* ====== MOBILE & SMALL TABLETS (<= 767px) ====== */
@media (max-width: 767px){

    #featured-steps .process{
        padding:70px 0;
    }

    #featured-steps .process-top{
        margin-bottom:50px;
    }

    #featured-steps .process-title{
        font-size:28px;
        line-height:1.3;
    }

    #featured-steps .process-desc{
        font-size:15px;
    }

    /* cards one by one */
    #featured-steps .process-cards{
        flex-wrap:wrap;
        gap:36px;
    }

    #featured-steps .step-box{
        width:100%;
        max-width:420px;
        padding:54px 26px;
        min-height:auto;
    }

    /* 🔥 NUMBER CUT FIX */
    #featured-steps .step-no{
        transform:translate(-15%, -15%) rotate(8deg);
    }

    /* hide arrow */
    #featured-steps .process-cards::after{
        display:none;
    }

    /* ===== CTA STACK (3 LINES) ===== */
    #featured-steps .process-cta-inline{
        flex-direction:column;
        gap:12px;
        text-align:center;
    }

    #featured-steps .process-btn{
        width:100%;
        justify-content:center;
    }

    #featured-steps .process-cta-text{
        display:block;
    }

    #featured-steps .process-phone-inline{
        justify-content:center;
    }
}

/* ====== VERY SMALL PHONES (<= 575px) ====== */
@media (max-width: 575px){

    #featured-steps .process-title{
        font-size:24px;
    }

    #featured-steps .process-desc{
        font-size:14px;
    }

    #featured-steps .step-title{
        font-size:20px;
    }

    #featured-steps .step-text{
        font-size:15px;
        max-width:100%;
    }

    #featured-steps .process-phone-inline{
        font-size:16px;
    }
}

/* =========================
   SERVICE SECTION LAYOUT
========================= */
#featured-services{
    position: relative;
    width: 100%;
    background: #f8faff;
    padding-top: 140px;
    padding-bottom: 140px;
    margin-top: 20px;   /* 👈 ye add karo */
}

#featured-services .service-container{
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px; /* halki responsive spacing */
}


/* =========================
   LEFT CONTENT
========================= */

#featured-services .services-left-content{
    max-width:520px;
    position: relative;
    margin-top: 20px;
}

#featured-services .services-small-title{
    display:inline-block;
    font-size:14px;
    font-weight:600;
    color:#ff7a00;
    margin-bottom:12px;
    letter-spacing:1px;
    text-transform:uppercase;
}

#featured-services .services-main-title{
    font-size:42px;
    line-height:1.2;
    font-weight:700;
    margin-bottom:18px;
    color:#0a2540;
    max-width:500px; 
}

#featured-services .services-desc{
    font-size:16px;
    line-height:1.7;
    color:#6b7c93;
    margin-bottom:32px;
}

#featured-services .services-main-btn{
    display:inline-block;
    padding:14px 38px;
    border-radius:30px;
    background:#fff;
    color:#0039B3;
    font-weight:600;
    text-decoration:none;
    transition:all .3s ease;
    padding-bottom: 20px;
}

#featured-services .services-main-btn:hover{
    background:#f1f1f1;
    color:#0039B3;
    transform:translateY(-3px);
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

/* =========================
   RIGHT SIDE – SERVICE CARDS
========================= */

#featured-services .service-cards{
    display:flex;
    flex-direction:column;   /* ek ke niche ek */
    gap:30px;
    min-height: 250px;   /* thoda height balanced */

}

#featured-services .service-card{
    display:flex;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:all .35s ease;
}

#featured-services .service-card:hover{
    transform:translateY(-6px);
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

#featured-services .service-card{
    transition:all .4s ease;
}

#featured-services .service-card:hover{
    transform:translateY(-8px);
    box-shadow:0 30px 70px rgba(0,0,0,.15);
}

/* =========================
   IMAGE + ICON OVERLAY
========================= */

#featured-services .service-image{
    position: relative;
    width: 42%;
    aspect-ratio: 4 / 3;   /* height auto control karega */
    overflow: hidden;
}

#featured-services .service-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* IMAGE ZOOM */
#featured-services .service-card:hover .service-image img{
    transform:scale(1.08);
}

#featured-services .service-icon{
    position:absolute;
    right:18px;
    bottom:18px;
    width:56px;
    height:56px;
    border-radius:14px;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
    transition:all .3s ease;
}

#featured-services .service-card:hover .service-icon{
    transform: rotate(12deg);
}

/* ICON BACKGROUND – DIFFERENT COLORS */
#featured-services .service-card:nth-child(1) .service-icon{
    background:#ff9800; /* ORANGE */
}

#featured-services .service-card:nth-child(2) .service-icon{
    background:#1e88e5; /* BLUE */
}

#featured-services .service-card:nth-child(3) .service-icon{
    background:#00b894; /* GREEN */
}

/* =========================
   CONTENT AREA
========================= */

#featured-services .service-content{
    width:58%;
    padding:28px 30px;   /* padding thoda kam */
    display:flex;
    flex-direction:column;
    justify-content:flex-start;   /* center remove */
    gap: 6px;
}

#featured-services .service-title{
    font-size:22px;
    font-weight:700;
    margin-top:6px;      /* upar thoda space */
    margin-bottom:12px;  /* niche thoda balanced gap */
    color:#0a2540;
}


#featured-services .service-card:hover .service-title{
    color: #007A7A;
}

#featured-services .service-excerpt{
    font-size:15px;
    line-height:1.6;
    color:#6b7c93;
    margin-bottom:10px;
}

#featured-services .service-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:15px;
    font-weight:600;
    color:#1660ff;
    text-decoration:none;
    transition:all .3s ease;
}

#featured-services .service-link::after{
    content:"››";
    font-size:18px;
    transition:transform .3s ease;
}

/* READ MORE */
#featured-services .service-card:hover .service-link{
    gap:10px;
    color:#ff9800;
}

/* ARROW MOVE */
#featured-services .service-card:hover .service-link::after{
    transform:translateX(8px);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1199px){
    #featured-services .services-main-title{
        font-size:38px;
    }
}

@media(max-width:991px){
    #featured-services .services-section{
        grid-template-columns:1fr;
        gap:50px;
    }

    #featured-services .service-card{
        flex-direction:column;
    }

    #featured-services .service-image,
    #featured-services .service-content{
        width:100%;
    }

    #featured-services .service-image{
        height:240px;
    }
}

@media(max-width:575px){
    #featured-services .services-main-title{
        font-size:32px;
    }

    #featured-services .service-content{
        padding:22px;
    }
}

@media(max-width:991px){
    #featured-services .service-card{
        flex-direction:column;
    }

    #featured-services .service-image,
    #featured-services .service-content{
        width:100%;
    }
}
/* Sections ke beech spacing badhane ke liye */
#featured-services .col-xl-7 {
    padding-left: 110px; /* Space thodi aur badha di hai */
}

/* Parent container for the arrow */
#featured-services .services-main-title {
    position: relative;
    display: inline-block; /* Arrow ko text ke end se align karne ke liye zaroori hai */
}

/* Arrow position and styling */
#featured-services .services-arrow {
    position: absolute;
    right: -150px; /* Title ke end se distance */
    top: 100%;      /* Title ke height ke hissab se position */
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 5;
}

/* Responsive adjustment */
@media(max-width: 1200px) {
    #featured-services .col-xl-7 {
        padding-left: 60px;
    }
    #featured-services .services-arrow {
        right: -90px;
        transform: scale(0.8) translateY(-50%); /* Chote screens par arrow thoda chota */
    }
}

@media(max-width: 991px) {
    #featured-services .services-arrow {
        display: none; /* Mobile par arrow hide */
    }
    #featured-services .col-xl-7 {
        padding-left: 15px;
    }
}
@media(max-width:991px){

    #featured-services .service-image{
        position:relative;
        height:240px;
    }

    #featured-services .service-icon{
        right:15px;
        bottom:15px;
        transform:none;
    }

}


/* ================================
   FEATURED FEATURES - FACILITY
================================ */

/* ========================================
   FEATURED FEATURES CURVE SECTION
======================================== */

#featured-features{
    position: relative;
    background: #1660FF;

    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    padding: 220px 0 260px;  
    z-index: 1;
}


#featured-features .facility-container {
    width: 1200px;
    max-width: 95%;
    margin: 0 auto;
    z-index: 5;
    padding-bottom:120px;
}

/* ================= TOP & BOTTOM WAVES ================= */
#featured-features .top-wave,
#featured-features .bottom-wave{
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 2;
}

#featured-features .top-wave{
    top: 0;
}

#featured-features .bottom-wave{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: rotate(180deg);
    z-index: 0;   /* 👈 important */
}


#featured-features .top-wave svg,
#featured-features .bottom-wave svg{
    display: block;
    width: 100%;
    height: 130px;
}

/* --- Dash Lines (Left & Right Curves) --- */
#featured-features .dash-line {
    position: absolute;
    width: 250px;
    height: 400px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    z-index: 1;
}
#featured-features .dash-left {
    left: -100px;
    top: 10%;
    transform: rotate(15deg);
}
#featured-features .dash-right {
    right: -100px;
    bottom: 10%;
    border-color: rgba(255, 183, 3, 0.3); /* Yellowish dash */
    transform: rotate(-15deg);
}
/* ================= FLOATING BUBBLES ================= */

/* --- Bubbles Position (Exact as requested) --- */
#featured-features .bubble {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
    border: 1.5px solid rgba(255, 255, 255, 0.3); /* Border as per your request */
    z-index: 1;
    animation: floatUpDown 6s ease-in-out infinite;
}

@keyframes floatUpDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-25px); } /* Continuous floating effect */
}
/* 1. Title ke left mein (Bada size) */
#featured-features .bubble-left-title {
    width: 80px;
    height: 80px;
    top: 10%;
    left: 20%;
    animation-delay: 0s;
}

/* 2. 10k ke theek upar (Same bada size) */
#featured-features .bubble-above-10k {
    width: 80px;
    height: 80px;
    bottom: 180px;
    left: 35%; /* 10k placement ke hisab se */
    animation-delay: 2s;
}

/* 3. 3rd card ke niche right mein (Chota size) */
#featured-features .bubble-below-card3 {
    width: 50px;
    height: 50px;
    top: 62%;
    right: 25%;
    animation-delay: 4s;
}

/* ================= HEADER ================= */

#featured-features .facility-header {
    text-align: center;
    margin-bottom: 70px;
    position: relative;
    z-index: 2;
    padding-top: 60px;
}

#featured-features .facility-subtitle {
    color: #ffb703;
    font-weight: 600;
    font-size:14px;
}

#featured-features .facility-title {
    color: #ffffff;
    font-size: 44px;
    font-weight: 700;
    max-width: 520px;
    margin: 15px auto 0;
    text-align: center;
    line-height: 1.3;
}


/* ================= CARDS ================= */

#featured-features .facility-card-wrapper {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 30px;
    position: relative;
    z-index: 2;
    margin-bottom: 90px;
}

#featured-features .facility-card {
    background: #ffffff;
    padding: 45px 35px;
    border-radius: 25px;
    transition: 0.4s ease;
}

#featured-features .facility-card:hover {
    transform: translateY(-12px);
}

#featured-features .facility-icon-box {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: #e6efff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

#featured-features .facility-icon-box i , .facility-icon-box svg{
    font-size: 28px;
    color: #2563eb;
}

#featured-features .facility-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: #0a2540;
    margin-bottom: 15px;
}

#featured-features .facility-card p {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
}


/* ================= COUNTER SECTION ================= */

#featured-features .facility-counter-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding-top: 50px;
}

#featured-features .facility-counter {
    text-align: center;
}

#featured-features .facility-counter h3 {
    font-size: 44px;
    font-weight: 700;
    color: #fff !important;
    margin-bottom: 10px;
}

#featured-features .facility-counter .symbol{
    color: #ff6600 !important;
    font-size: 44px;
    font-weight: 700;
}

#featured-features .facility-counter h3:hover , .facility-counter .symbol:hover{
    transform:scale(1.09);
}

#featured-features .facility-counter p {
    font-size: 16px;
    color: #E9F5FF;
    margin: 0;
    padding-bottom: 0;
}

/* ================= RESPONSIVE ================= */

@media(max-width:992px){
    #featured-features .facility-card-wrapper{
        grid-template-columns:repeat(2,1fr);
    }
    #featured-features .facility-counter-wrapper{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:576px){
    #featured-features .facility-card-wrapper,
    #featured-features .facility-counter-wrapper{
        grid-template-columns:1fr;
    }

    #featured-features .facility-title{
        font-size: 30px;
        max-width: 340px;   /* 👈 width control karega break */
    }

    #featured-features .counter-number{
        font-size:50px;
    }
}
@media(max-width:768px){
    #featured-features .top-wave svg,
    #featured-features .bottom-wave svg{
        height: 90px;
    }

}

@media(max-width:768px){
    #featured-features{
        padding: 200px 0 280px;
    }

    #featured-features .facility-header{
        padding-top: 40px;
    }
}
/* ================= MOBILE COUNTER FIX ================= */
@media (max-width: 576px) {

    #featured-features .facility-counter-wrapper{
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding-top: 40px;
    }

    #featured-features .facility-counter p{
        padding-bottom: 40px; /* 👈 curve bhi safe + layout bhi clean */
    }

    #featured-features .facility-counter h3{
        font-size: 32px;
    }
}
/* ================= MOBILE BUBBLE REPOSITION ================= */
@media(max-width:576px){

    /* Bubble 1 - Title ke left */
    #featured-features .bubble-left-title{
        width: 45px;
        height: 45px;
        top: 4%;
        left: 8%;
    }

    /* Bubble 2 - 10K ke upar */
    #featured-features .bubble-below-card3{
        width: 50px;
        height: 50px;
        top: 85%;   /* counters start ke just upar */
        left: 30%;
    }

    /* Bubble 3 - 500+ ke pass */
    #featured-features .bubble-above-10k{
        width: 40px;
        height: 40px;
        top: 78%;
        right: 20%;
        left: auto;
    }

}


/* ===============================
   FEATURED ABOUT SECTION
=================================*/

#featured-about {
    position: relative;
    padding: 100px  0;
    background: #f5f7fa;
    overflow: hidden;
}

#featured-about .about-container {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 0 15px;
}

/* IMAGE KO BIG TITLE LEVEL PAR LANA */
#featured-about .col-lg-6:first-child{
    padding-left:0;
    margin-top:60px;   /* adjust 30-60px as needed */
}

/* IMAGE WRAPPER */
#featured-about .about-image-wrapper{
    position:relative;
    overflow:hidden;
    border-radius:25px;
}

/* IMAGE HEIGHT */
#featured-about .about-image-wrapper img{
    width:100%;
    height:550px;
    object-fit:cover;
    display:block;
}
#featured-about .curve-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px; /* Container ki height */
    overflow: hidden;
}

#featured-about .curve-container svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: block;
}

/* Light Blue (Cyan) Curve - Yeh piche rahega aur thoda upar dikhega */
#featured-about .curve-cyan {
    height: 110px; /* Iski height blue se thodi zyada rakhi hai */
    z-index: 1;
}

/* Dark Blue Curve - Yeh aage rahega aur niche ka main portion cover karega */
#featured-about .curve-blue {
    height: 95px; /* Isse cyan curve ki sirf patli 'top line' dikhegi */
    z-index: 2;
}

/* EXPERIENCE BOX */
#featured-about .experience-box {
    position: absolute;
    left: 20px;
    bottom: 120px;
    background: #1660ff;
    
    /* Width fix karne se text 2 lines mein aa jayega */
    width: 180px; 
    padding: 40px 15px; 
    
    border-radius: 25px; /* Screenshot ke hisaab se thoda zyada rounded */
    color: #fff;
    text-align: center;
    z-index: 10;
}

#featured-about .experience-box h2 {
    font-size: 65px; /* 25 number ko thoda bada kiya */
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1; /* Number ke upar-niche extra space hatane ke liye */
    color: #fff;
}

#featured-about .experience-box p {
    font-size: 20px; /* Text size thoda chota kiya taaki box mein fit ho */
    font-weight: 600;
    text-align: center;
    color: #fff;
    
    /* Line break aur spacing ke liye important settings */
    line-height: 1.2; 
    text-transform: capitalize; 
    margin: 0 auto;
    width: 90%; /* Text ko thoda andar sametne ke liye */
}
/* RIGHT CONTENT */
#featured-about .about-small-title {
    color: #ff6600;
    font-weight: 600;
    font-size: 14px;
}

#featured-about .about-big-title {
    font-size: 44px;
    font-weight: 700;
    margin: 20px 0;
    color: #0a2540;
}

#featured-about .about-description {
    color: #6c757d;
    margin-bottom: 30px;
    font-size: 20px;
    line-height: 1.7;
}

/* FEATURES GRID */
#featured-about .about-features {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 30px;
    padding-bottom:20px;
}

/* PERFECT CIRCLE ICON */
#featured-about .feature-box{
    display: flex;
    gap: 10px;
}

#featured-about .feature-box h5 { 
    font-weight:700; 
    font-size: 22px; 
    color: #0a2540; 
} 

#featured-about .feature-box p { 
    font-size:16px; 
    color:#6c757d; 
    font-size: 200; 
}

#featured-about .feature-icon {
    width: 65px;
    height: 65px;
    min-width: 65px;
    border-radius: 50%;
    background: #0a2540;
    display: flex;
    align-items: center;
    justify-content: center;
}

#featured-about .feature-icon i, #featured-about .feature-icon svg {
    font-size: 20px;
    color: #fff;
}

/* BUTTON */
#featured-about .about-buttons{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:nowrap;
}

#featured-about .about-btn {
    background: #2b82fb;
    color:#fff;
    padding:15px 35px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
}

#featured-about .about-btn:hover{ 
    color: #fff; 
    background-color: #1660ff; 
}

#featured-about .about-btn i, .about-btn svg{
    color: #fff;
    font-size: 16px;
}

/* PHONE BOX */
#featured-about .phone-box { 
    display:flex; 
    align-items:center; 
    gap:15px; 
    border:2px solid #2b5cff; 
    padding:10px 20px; 
    border-radius:50px; 
    background-color: #fff;
}
 
#featured-about .phone-box h6{ 
    font-size: 18px; 
    color: #0a2540; 
    font-weight: 700; 
} 

#featured-about .phone-box span{ 
    font-size: 12px; 
    font-weight: 600; 
    color:#6c757d; 
} 

#featured-about .phone-icon{
    width:45px;
    height:45px;
    border-radius:50%;
    background:#2b82fb;
    display:flex;
    align-items:center;
    justify-content:center;
}

#featured-about .phone-icon i, .phone-icon svg{
    color:#fff !important;
    font-size:16px !important;
}

/* ===============================
   ABOUT SECTION RESPONSIVE
=================================*/

/* ================= TABLET ================= */
@media (max-width: 992px){

    #featured-about{
        padding: 100px 0 150px 0;
    }

    /* Columns Stack */
    #featured-about .col-lg-6{
        width:100%;
        max-width:100%;
        flex:0 0 100%;
    }

    #featured-about .col-lg-6:first-child{
        margin-top:0;
        margin-bottom:40px;
    }

    /* Experience Box Adjust */
    #featured-about .experience-box{
        left:20px;
        bottom:20px;
        width:160px;
        padding:30px 15px;
    }

    #featured-about .experience-box h2{
        font-size:50px;
    }

    #featured-about .experience-box p{
        font-size:16px;
    }

    /* Title Resize */
    #featured-about .about-big-title{
        font-size:36px;
    }

    #featured-about .about-description{
        font-size:18px;
    }

    /* Features Gap Reduce */
    #featured-about .about-features{
        gap:20px;
    }
}


/* ================= MOBILE ================= */
@media (max-width: 576px){

    #featured-about{
        padding: 80px 0 120px 0;
    }

    /* Big Title Smaller */
    #featured-about .about-big-title{
        font-size:28px;
        margin:15px 0;
    }

    #featured-about .about-description{
        font-size:16px;
        line-height:1.6;
    }

    /* Features 1 Column */
    #featured-about .about-features{
        grid-template-columns: 1fr;
        gap:25px;
    }

    /* Feature Box Vertical */
    #featured-about .feature-box{
        gap:15px;
    }

    #featured-about .feature-icon{
        width:55px;
        height:55px;
        min-width:55px;
    }

    /* Buttons Wrap */
    #featured-about .about-buttons{
        flex-wrap:wrap;
        gap:15px;
    }

    #featured-about .about-btn{
        width:100%;
        text-align:center;
    }
   

    #featured-about .phone-box{
        width:auto;                 /* full width remove */
        padding:8px 14px;           /* slightly compact */
        gap:8px;
        border-radius:40px;
    }

    #featured-about .phone-box h6{
        font-size:16px;
    }

    #featured-about .phone-icon{
        width:40px;
        height:40px;
    }

    /* Experience Box Smaller */
    #featured-about .experience-box{
        width:140px;
        padding:25px 10px;
    }

    #featured-about .experience-box h2{
        font-size:40px;
    }

    #featured-about .experience-box p{
        font-size:14px;
    }

    /* Curve Height Adjust */
    #featured-about .curve-container{
        height:80px;
    }

    #featured-about .curve-cyan{
        height:75px;
    }

    #featured-about .curve-blue{
        height:65px;
    }
}

/* ================= LARGE TABLET / IPAD PRO / SURFACE FIX ================= */
@media (max-width: 1200px){

    /* Image height thodi controlled */
    #featured-about .about-image-wrapper img{
        height: 620px;
        object-fit: cover;
    }

}
/* ================= TABLET & FOLD DEVICES FIX ================= */
@media (min-width: 768px) and (max-width: 1200px){

    #featured-about .experience-box{
        bottom: 100px;   /* curve height (120px) se upar safe */
    }

}
@media (max-width: 767px){

    #featured-about .experience-box{
        bottom: 80px;
    }

}

@media (max-width: 576px){

    #featured-about .about-btn{
        width:auto;              /* full width nahi */
        padding:12px 28px;       /* medium comfortable size */
        font-size:15px;          /* readable but not big */
        border-radius:35px;
    }

    #featured-about .about-buttons{
        justify-content:flex-start;
        gap:12px;
    }

}


/* ================= TOPBAR ================= */

.topbar {
    background: #2f5f8f;
    color: #fff;
    font-size: 14px;
    padding: 8px 0;
}

.topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
}

.topbar-left span {
    margin-right: 25px;
}

.topbar-right {
    gap: 15px;
}

.certified-btn {
    background: #ff7a00;
    padding: 6px 18px;
    border-radius: 25px;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

.social-icons {
    display: flex;
    gap: 12px;
}

.social-icons a {
    color: #fff;
    font-size: 14px;
}
/* Remove side space on mobile */
@media (max-width: 991px) {
    
    .topbar .container {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

}
/* ================= MOBILE DEVICES ================= */
@media (max-width: 767px) {

    .topbar-inner {
        justify-content: space-between;
    }

    /* Hide Location */
    .topbar-left span:last-child {
        display: none;
    }

    /* Hide Certified Button */
    .certified-btn {
        display: none;
    }

    /* Keep only clock + social */
    .topbar-left {
        gap: 5px;
    }

    .social-icons {
        gap: 10px;
    }
}
/* ================= TABLET DEVICES ================= */
@media (min-width: 768px) and (max-width: 1024px) {

    .topbar-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Hide only Certified Button */
    .certified-btn {
        display: none;
    }

    /* Show everything else */
    .topbar-left span {
        display: inline-block;
    }

    .social-icons {
        display: flex;
    }
}
@media (min-width: 1025px) {

    .certified-btn {
        display: inline-block;
    }

}

/*Search Button */
/* Align menu properly */
.main-navigation ul.nav-menu {
    align-items: center;
}

/* Remove extra spacing from last menu item */
.main-navigation ul.nav-menu > li {
    margin: 0 6px;
}

/* SEARCH BUTTON */
.main-navigation ul.nav-menu > li.header-search-btn > a {
    background: #00D7FF;
    color: #fff !important;
    padding: 10px 44px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    display: inline-block;
    line-height: normal;
}

/* CONTACT BUTTON */
.main-navigation ul.nav-menu > li.header-contact-btn > a {
    background: #ff6a00;
    color: #fff !important;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    display: inline-block;
    line-height: normal;
}

/* Hover */
.main-navigation ul.nav-menu > li.header-search-btn > a:hover {
    background: #0e9dad;
}

.main-navigation ul.nav-menu > li.header-contact-btn > a:hover {
    transform:scale(1.07);
}

/*footer*/
/* Background & Layout */
.footer-widgets-area {
    padding: 60px  20px;
    color: #ffffff;
}

/* 5 Column Grid for Widgets */
.col-lg-2-4 {
    flex: 0 0 20%;
    max-width: 20%;
    padding: 0 15px;
}

/* Newsletter Section Styles */
.footer-cta-title { color: #fff; font-weight: bold; margin-bottom: 20px;font-size: 42px; }
/* 1. Yellow Button Text Color Fix */
.footer-cta-yellow-btn {
    background-color: #fdc401 !important;
    color: #000000 !important; /* Force Black Text */
    padding: 14px 35px !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    text-decoration: none !important;
    border: none !important;
    font-size: 16px !important;
    transition: 0.3s all ease;
}

.footer-cta-yellow-btn:hover {
    transform: scale(1.05); 
    text-decoration:none;
}
.newsletter-form-flex {
    flex-wrap:nowrap;
    display: flex;
    gap: 10px;
}
.newsletter-form-flex input {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 30px;
    padding: 10px 20px;
    color: #fff;
    width: 100%;
}
/* Normal state: Jab input khali ho ya focus na ho */
.newsletter-form-flex .newsletter-input-field {
     flex:1;
    min-width:0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    padding: 10px 20px;
    color: #fff !important;
    width: 100%;
    transition: all 0.3s ease; /* Smooth transition ke liye */
}

/* Click/Focus state: Jab user email box par click kare */
.newsletter-form-flex .newsletter-input-field:focus {
    outline: none !important; /* Blue outline hatane ke liye */
    border: 1.5px solid #00d2b4 !important; /* Screenshot wala Cyan color */
    box-shadow: 0 0 10px rgba(0, 210, 180, 0.3); /* Soft glow effect */
    background: rgba(255, 255, 255, 0.15); /* Thoda bright background focus par */
}

/* Placeholder ka color fix karne ke liye */
.newsletter-form-flex .newsletter-input-field::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.btn-subscribe {  white-space:nowrap;background: #00d254; color: #fff; border: none; border-radius: 30px; padding:12px 25px; }
.btn-subscribe:hover{ transform: scale(1.05); text-decoration:none; }
/* Widget Text Colors */
.footer-widgets-area .widget-title, 
.footer-widgets-area p, 
.footer-widgets-area li, 
.footer-widgets-area a {
    color: #ffffff !important;
}


/* Copyright aur Icons ko ek line mein laane ke liye */
.site-info .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* Services Grid (Two Columns) */
/* 5. Services Grid Layout (Side by Side) */
.footer-services-grid {
    display: flex;
    gap: 50px; /* Space between two vertical lists */
}
.footer-services-grid ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
/* 6. Email Underline & Phone Icon Fix */
.contact-email {
    text-decoration: underline !important;
    margin-top: 15px;
    display: block;
}
/* Contact Info & Yellow Circle Icon */
.footer-contact-info p {
    color: #ffffff !important;
    margin-bottom: 15px;
}
.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}
.contact-item .icon-circle {
    background: #fdc401;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #000;
    margin-right: 10px;
}
.contact-item a {
    color: #ffffff !important;
    font-weight: 600;
    text-decoration: none;
}

/* Working Hours Alignment */
.working-hours-list {
    padding: 0;
    margin: 0;
    list-style: none;
}
.working-hours-list li{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
}

.working-hours-list .day{
flex:1;
text-align:left;
}

.working-hours-list .time{
text-align:right;
}
/* Contact Info Address Fix */
.footer-address {
    max-width: 200px; /* Isse text 2 line mein break ho jayega */
    line-height: 1.5;
    margin-bottom: 15px;
    display: block;
}

/* Individual column width control */
.footer-col {
    flex: 1; /* Teeno ko barabar jagah milegi */
}

/* Services column ko thoda zyada space dene ke liye (Optional) */
.footer-col:first-child {
    flex: 1.5; 
}
/* Footer Title Styles */
#colophon .widget-title {
    color: #ffffff !important; /* White color for Titles */
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 30px;
}

/* Footer Body Text Styles */
#colophon .textwidget, 
#colophon li, 
#colophon p, 
#colophon a {
    color: #b0b0b0 !important; /* Grayish color for text */
    font-size: 14px !important; /* Smaller than title */
    text-decoration: none;
    transition: 0.3s;
}
#colophon li {
    margin-bottom: 12px !important; /* Proper vertical spacing */
}
#colophon a:hover {
    color: #fdc401 !important; /* Yellow hover effect */
}

/* Services Column - Two Columns Layout */
#colophon .widget_nav_menu ul {
    display: grid;
   grid-template-columns:repeat(2,1fr);
    gap: 10px 40px;
    list-style: none;
    padding: 0;
}

/* Footer widgets ke niche ki line */
.site-info p {
 color:#b0b0b0;
 font-size: 14px;  
}
/* Copyright Text Styling */
.copy-right {
    color: #b0b0b0 !important;
    font-size: 14px !important;
}

/* --- Social Icons Styling --- */
.footer-social-circles {
    display: flex !important;
    gap: 12px;
    justify-content: flex-end; /* Desktop par right side */
    align-items: center;
}

.footer-social-circles a {
    width: 42px !important;
    height: 42px !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 50% !important;
    display: inline-flex !important; /* Center align ke liye zaroori */
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    background: transparent;
}

/* Icon specifically */
.footer-social-circles a i , .footer-social-circles a svg{
    font-size: 18px !important;
    color: #ffffff !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Hover State */
.footer-social-circles a:hover {
    background-color: #fdc401 !important;
    border-color: #fdc401 !important;
    transform: translateY(-3px);
}

.footer-social-circles a:hover i, .footer-social-circles a:hover svg {
    color: #000000 !important;
}

/* Layout Spacing Fix */
/* 3. Spacing between Footer Boxes (Top Space) */
.footer-widgets-grid {
    margin-top: 40px; /* Top space for boxes */
    display: flex;
    justify-content: space-between;
}
.footer-col {
    flex: 1;
}
/* 2. Top and Bottom Divider Lines */
/* --- Line Style (Aligned with Widgets) --- */
.footer-custom-line {
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    margin: 40px 0 !important;
    width: 100% !important; /* Ye container ki width ke barabar rahegi */
    display: block !important;
    opacity: 1 !important;
}

/* ======================================================
            FOOTER RESPONSIVE CSS
====================================================== */

/* ---------- Large Desktop (1200px+) ---------- */
@media (min-width:1200px){

.footer-widgets-grid{
    display:flex;
    gap:40px;
}

.footer-col{
    flex:1;
}

.footer-services-grid{
    gap:60px;
}

}

/* ---------- Tablet Landscape (992px - 1199px) ---------- */
@media (max-width:1199px){

.footer-widgets-grid{
    flex-wrap:wrap;
    gap:30px;
}

.footer-col{
    flex:0 0 50%;
    max-width:50%;
}

.footer-services-grid{
    gap:30px;
}

.footer-cta-title{
    font-size:32px;
}

}

/* ---------- Tablet Portrait (768px - 991px) ---------- */
@media (max-width:991px){

.footer-widgets-grid{
    flex-wrap:wrap;
}

.footer-col{
    flex:0 0 50%;
    max-width:50%;
    margin-bottom:40px;
}

.footer-services-grid{
    flex-direction:column;
    gap:10px;
}

.footer-cta-title{
    font-size:28px;
}

.newsletter-form-flex{
    flex-direction:row;
}

.newsletter-form-flex input{
    flex:1;
}

.btn-subscribe{
    flex-shrink:0;
}

.footer-social-circles{
    justify-content:center;
}
#colophon .widget_nav_menu ul{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:10px 30px !important;
}


}

/* ---------- Mobile (576px - 767px) ---------- */
@media (max-width:767px){

.footer-widgets-grid{
    flex-direction:column;
}

.footer-col{
    flex:0 0 100%;
    max-width:100%;
    margin-bottom:35px;
}

.footer-services-grid{
    flex-direction:column;
    gap:8px;
}

.footer-cta-title{
    font-size:24px;
    text-align:center;
}

.newsletter-form-flex{
    flex-direction:row;
}

.newsletter-form-flex input{
    flex:1;
}

.btn-subscribe{
    flex-shrink:0;
}
.footer-social-circles{
    justify-content:center;
    margin-top:15px;
}

.site-info .row{
    flex-direction:column;
    text-align:center;
    gap:10px;
}

}

/* ---------- Small Mobile (max 575px) ---------- */
@media (max-width:575px){

.footer-cta-title{
    font-size:22px;
}

.footer-widgets-area{
    padding:40px 20px;
}

.footer-social-circles a{
    width:38px;
    height:38px;
}

.footer-social-circles a i{
    font-size:16px;
}

.contact-item{
    gap:8px;
}

.contact-item .icon-circle{
    width:30px;
    height:30px;
}

}

/* ---------- Extra Small Mobile (max 420px) ---------- */
@media (max-width:420px){

.footer-cta-title{
    font-size:20px;
}

.footer-services-grid{
    gap:5px;
}

.footer-social-circles{
    gap:8px;
}

.footer-social-circles a{
    width:34px;
    height:34px;
}

}

/* Banner Container Alignment */
.header-title .wrapper {
   margin-top: 0rem;
   text-align: center;
}

.custom-banner-content {
   /* margin-top: 20px;*/
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* Main Heading Styling */
.main-banner-title {
    color: #ffffff;
    font-size: 55px; /* bold font */
    font-weight: 800;

    line-height: 1.2;
    text-transform: none; /* Screenshot mein normal case hai */
}

/* Subtitle/Description Styling */
.banner-description {
    color: #ff6a00;
    font-size: 16px;
    font-weight: 700;
   text-transform: capitalize;
    opacity: 0.9;
}

.bread-arrow i {
    color: #ffffff;
    margin: 0 8px;
    font-size: 12px;
}



/* Container ko upar lane ke liye */
.inner-imgtext {
    display: flex !important;
    align-items: center !important; /* Vertically center karega */
    height: 100%; /* Puri height cover karega */
    padding-bottom: 0 !important; /* Agar koi bottom padding hai toh use hatayega */
}

.header-title{
margin-top:0;
z-index:2;
position:relative;
}
/* Breadcrumb aur Title ke beech ka gap kam karne ke liye */
/* ===============================
   CLEAN BREADCRUMB (MATCH RIGHT)
================================ */

.breadcrumbbox{
margin-top:25px;
display:flex;
justify-content:center;
}

/* LINKS & TEXT */
.breadcrumbbox a,
.breadcrumbbox span{

color:#ffffff;
font-size:14px;
font-weight:600;
}

/* HOME ICON */
#page-site-header .breadcrumbbox .root::before {
    content: "\f015"; /* fa-home */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #ffcc00;
    margin-right: 6px;
}

/* ARROW */
#page-site-header .breadcrumbbox .bread-arrow {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid #ffffff;
    border-top: 2px solid #ffffff;
    transform: rotate(45deg);
    margin: 0 12px;
    position: relative;
    top: -1px;
}



/* CURRENT PAGE */
#page-site-header .breadcrumbbox .treeEnd {
    color: #ff6a00 ;
    font-weight: 600;
}

/* REMOVE OLD HACKS */
#page-site-header .breadcrumbbox span.treeEnd-margin,
#page-site-header .breadcrumbbox span.bread-arrow {
    margin-left: 10px;
    left: 0;
}

/* REMOVE underline on breadcrumb hover */
/* FORCE REMOVE breadcrumb hover line (theme hard fix) */
#page-site-header .breadcrumbbox a,
#page-site-header .breadcrumbbox a:hover,
#page-site-header .breadcrumbbox a:focus,
#page-site-header .breadcrumbbox a:active {
    text-decoration: none !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background-image: none !important;
    background-size: 0 !important;
}

#page-site-header .breadcrumbbox a::before,
#page-site-header .breadcrumbbox a::after,
#page-site-header .breadcrumbbox a:hover::before,
#page-site-header .breadcrumbbox a:hover::after {
    content: none !important;
    display: none !important;
}

#page-site-header .breadcrumbbox span,
#page-site-header .breadcrumbbox span:hover {
    text-decoration: none !important;
    background-image: none !important;
    box-shadow: none !important;
}

.main-banner-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* ==========================
INNER PAGE CURVE
========================== */

.inner-page-curve{
position:absolute;
bottom:0;
left:0;
width:100%;
line-height:0;
z-index:3;
}

.inner-page-curve svg{
display:block;
width:100%;
height:80px;
}
/* =========================
BANNER SHAPES
========================= */

.banner-shapes span{
position:absolute;
display:block;
border-radius:50%;
opacity:.35;
z-index:1;
}

/* ===== CLEAN CIRCLES ===== */

#page-site-header .circle{
position:absolute;
border-radius:50%;
background: rgba(120,190,255,0.08) !important;
border:2px solid rgba(120,190,255,0.45) !important;
animation:floatCircle 8s ease-in-out infinite;
z-index:2;
}

/* LEFT BIG CIRCLE */

#page-site-header  .c1{
width:60px;
height:60px;
left:22%;
top:250px;
}

/* RIGHT SMALL CIRCLE */

#page-site-header .c2{
width:30px;
height:30px;
right:22%;
top:350px;
animation-delay:2s;
}


/* ===== WATER DROPLETS ===== */

#page-site-header .drop{
position:absolute;
font-size:26px;
color:#5edfff; /* cyan blue */
animation:floatDrop 7s ease-in-out infinite;
}

#page-site-header .drop i{
text-shadow:0 0 10px rgba(94,223,255,0.7);
}

#page-site-header .d1{
left:7%;
top:350px;
}

#page-site-header .d2{
right:7%;
top:350px;
animation-delay:3s;
}

/* animation */

@keyframes floatCircle{
0%{transform:translateY(0)}
50%{transform:translateY(-30px)}
100%{transform:translateY(0)}
}

@keyframes floatDrop{
0%{transform:translateY(0)}
50%{transform:translateY(-20px)}
100%{transform:translateY(0)}
}

.breadcrumbbox .button{

background:rgba(255,255,255,0.15);

backdrop-filter:blur(8px);

padding:12px 28px;

border-radius:50px;

display:inline-flex;
align-items:center;
gap:12px;

border:1px solid rgba(255,255,255,0.25);

}

/*About inner page*/

#webnotick-aboutinn-wrapper{
padding:80px 0;
}

#webnotick-aboutinn-wrapper .container,
#webnotick-aboutinn-wrapper .row{
padding-left:20px;
padding-right:20px;
}

/* ABOUTInn SECTION1 */

#webnotick-aboutinn-wrapper .aboutinn-section{
padding:100px 0;
}

#webnotick-aboutinn-wrapper .aboutinn-image{
position:relative;
}

#webnotick-aboutinn-wrapper .aboutinn-image img{
width:100%;
height:520px;
object-fit:cover;
border-radius:18px;
}


/* BLUE BOX */

#webnotick-aboutinn-wrapper .aboutinn-exp-box{
position:absolute;
bottom:20px;
left:30px;
background:#115EFA;
color:#fff;
padding:25px 30px;
border-radius:12px;
}

#webnotick-aboutinn-wrapper .aboutinn-exp-box span{
font-size:36px;
font-weight:700;
display:block;
}

#webnotick-aboutinn-wrapper .aboutinn-exp-box p{
margin:0;
font-size:14px;
}

/* SMALL TITLE */

#webnotick-aboutinn-wrapper .aboutinn-small-title{
color:#ff6600;
font-size:14px;
font-weight:700;
letter-spacing:1px;
margin-bottom:10px;
}


/* MAIN TITLE */

#webnotick-aboutinn-wrapper .aboutinn-content h2{
font-size:44px;
font-weight:700;
color:#0c2e60;
line-height:1.3;
margin-bottom:20px;
 max-width: 700px;
}


/* PARAGRAPH */

#webnotick-aboutinn-wrapper .aboutinn-desc p{
font-size:16px;
line-height:28px;
color:#666;
margin-bottom:15px;
}


/* FEATURES GRID */

#webnotick-aboutinn-wrapper .aboutinn-features{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
margin-top:25px;
}

#webnotick-aboutinn-wrapper .aboutinn-feature{
display:flex;
align-items:flex-start;
gap:15px;
}

/* ICON BOX */

#webnotick-aboutinn-wrapper .aboutinn-feature svg,
#webnotick-aboutinn-wrapper .aboutinn-feature i{
width:48px;
height:48px;
min-width:48px;
padding:14px;
border-radius:12px;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
line-height:1;
}

/* ICON SIZE */

#webnotick-aboutinn-wrapper .aboutinn-feature svg path{
width:20px;
height:20px;
}

/* DIFFERENT ICON COLORS */

.aboutinn-feature:nth-child(1) svg,
.aboutinn-feature:nth-child(1) i{
background:#E1F9FD;
fill:#00a99d;
color:#0084A1;
}

.aboutinn-feature:nth-child(2) svg,
.aboutinn-feature:nth-child(2) i{
background:#E6F0FF;
fill:#115EFA;
color:#115EFA;
}

.aboutinn-feature:nth-child(3) svg,
.aboutinn-feature:nth-child(3) i{
background:#D1F9ED;
fill:#00897B;
color:#00897B;
}

.aboutinn-feature:nth-child(4) svg,
.aboutinn-feature:nth-child(4) i{
background:#FFF0E6;
fill:#F05A10;
color:#F05A10;
}

#webnotick-aboutinn-wrapper .aboutinn-feature h5{
font-size:16px;
font-weight:700;
color:#0c2e60;
margin-bottom:5px;
}

#webnotick-aboutinn-wrapper .aboutinn-feature p{
font-size:14px;
color:#666;
margin:0;
}

/* WHY SECTION */

#webnotick-aboutinn-wrapper .aboutinn-why-section{
background:#EBF8FF;
padding:100px 0;
}

/* SMALL TITLE */

#webnotick-aboutinn-wrapper .aboutinn-why-section .aboutinn-small-title{
text-align:center;
color:#ff6600;
font-size:14px;
font-weight:700;
letter-spacing:1px;
margin-bottom:10px;
}

/* MAIN TITLE */

#webnotick-aboutinn-wrapper .aboutinn-heading{
text-align:center;
font-size:42px;
font-weight:700;
margin-bottom:60px;
color:#0c2e60;
}

/* CARD */

#webnotick-aboutinn-wrapper .aboutinn-box{
display:flex;
flex-direction:column;
align-items:flex-start;
text-align:left;
background:#fff;
padding:50px 30px;
border-radius:15px;
box-shadow:0 15px 35px rgba(0,0,0,0.06);
height:100%;
transition:all .35s ease;
}

#webnotick-aboutinn-wrapper .aboutinn-box:hover{
transform:translateY(-12px);
box-shadow:0 25px 55px rgba(0,0,0,0.15);
}

/* ICON BOX */

#webnotick-aboutinn-wrapper .aboutinn-icon{
width:65px;
height:65px;
display:flex;
align-items:center;
justify-content:center;
border-radius:16px;
margin-bottom:18px;
transition:all .35s ease;
}

#webnotick-aboutinn-wrapper .aboutinn-box:hover .aboutinn-icon{
transform:scale(1.12);
}

#webnotick-aboutinn-wrapper .aboutinn-icon svg,
#webnotick-aboutinn-wrapper .aboutinn-icon i{
width:28px;
height:28px;
font-size:28px;
color:#fff;
fill:#fff;
line-height:1;
}

/* ICON COLORS */

#webnotick-aboutinn-wrapper .row .col-lg-3:nth-child(1) .aboutinn-icon{
background:#0096C1;
}

#webnotick-aboutinn-wrapper .row .col-lg-3:nth-child(2) .aboutinn-icon{
background:#11987E;
}

#webnotick-aboutinn-wrapper .row .col-lg-3:nth-child(3) .aboutinn-icon{
background:#F05A10;
}

#webnotick-aboutinn-wrapper .row .col-lg-3:nth-child(4) .aboutinn-icon{
background:#115EFA;
}

/* TEXT */

#webnotick-aboutinn-wrapper .aboutinn-box h4{
font-size:20px;
font-weight:700;
margin-bottom:8px;
color:#0c2e60;
}

#webnotick-aboutinn-wrapper .aboutinn-box p{
font-size:15px;
line-height:26px;
color:#666;
}

/* About TEAM SECTION */

#webnotick-aboutinn-wrapper .aboutinn-team-section{
padding:100px 0;
background:#F8FBFF;
}
/* SMALL TITLE */

#webnotick-aboutinn-wrapper .aboutinn-team-small-title{
color:#ff6600;
font-size:14px;
font-weight:700;
letter-spacing:1px;
margin-bottom:10px;
}


/* MAIN TITLE */

#webnotick-aboutinn-wrapper .aboutinn-team-heading {
text-align:center;
font-size:42px;
font-weight:700;
margin-bottom:60px;
color:#0c2e60;
}

/* CARD */

#webnotick-aboutinn-wrapper .aboutinn-team-box{
background:#fff;
text-align:center;
border-radius:16px;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
transition:all .35s ease;
height:100%;
overflow:hidden;
position:relative;
}

#webnotick-aboutinn-wrapper .aboutinn-team-box:hover{
transform:translateY(-12px);
box-shadow:0 25px 55px rgba(0,0,0,0.18);
}

#webnotick-aboutinn-wrapper .aboutinn-team-box{
position:relative;
}

#webnotick-aboutinn-wrapper .aboutinn-team-box::before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:358px; /* image se thoda zyada */

background:linear-gradient(
to top,
rgba(12,46,96,0.85) 0%,
rgba(12,46,96,0.55) 40%,
rgba(12,46,96,0.0) 80%
);
opacity:0;
transition:all .4s ease;
pointer-events:none;
z-index:2;
}

#webnotick-aboutinn-wrapper .aboutinn-team-box:hover::before{
opacity:1;
}

/* IMAGE FIX */

#webnotick-aboutinn-wrapper .aboutinn-team-box img{
width:100%;
height:340px;
object-fit:cover;
display:block;
transition:transform .45s ease;
position:relative;
z-index:1;
}

#webnotick-aboutinn-wrapper .aboutinn-team-box:hover img{
transform:scale(1.08);
}

#webnotick-aboutinn-wrapper .aboutinn-team-box h4{
font-size:22px;
font-weight:700;
color:#0c2e60;
margin-top:20px;
margin-bottom:6px;
}

#webnotick-aboutinn-wrapper .aboutinn-team-box p{
font-size:16px;
color:#ff6600;
margin-bottom:35px;
font-weight:500;
}

/* ============================= */
/* TABLET RESPONSIVE (991px) */
/* ============================= */

@media (max-width:991px){

#webnotick-aboutinn-wrapper .container,
#webnotick-aboutinn-wrapper .row{
padding-left:18px;
padding-right:18px;
}

#webnotick-aboutinn-wrapper .aboutinn-section{
padding:70px 0;
}

/* About Section Layout */

#webnotick-aboutinn-wrapper .aboutinn-content h2{
font-size:34px;
}

#webnotick-aboutinn-wrapper .aboutinn-image img{
height:420px;
margin-bottom:20px;
}

/* Features Grid */

#webnotick-aboutinn-wrapper .aboutinn-features{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-top:20px;
}

/* Why Section */

#webnotick-aboutinn-wrapper .aboutinn-heading{
font-size:32px;
margin-bottom:40px;
}

/* Team Section */

#webnotick-aboutinn-wrapper .aboutinn-team-box img{
height:600px;
}

#webnotick-aboutinn-wrapper .aboutinn-team-section .col-lg-3{
margin-bottom:25px;
}

}


/* ============================= */
/* MOBILE RESPONSIVE (767px) */
/* ============================= */

@media (max-width:767px){

#webnotick-aboutinn-wrapper .container,
#webnotick-aboutinn-wrapper .row{
padding-left:18px;
padding-right:18px;
}

/* Section spacing */

#webnotick-aboutinn-wrapper .aboutinn-section,
#webnotick-aboutinn-wrapper .aboutinn-why-section,
#webnotick-aboutinn-wrapper .aboutinn-team-section{
padding:60px 0;
}

/* About Section */

#webnotick-aboutinn-wrapper .aboutinn-content h2{
font-size:28px;
}

#webnotick-aboutinn-wrapper .aboutinn-image img{
height:320px;
margin-bottom:20px;
}

/* Experience Box */

#webnotick-aboutinn-wrapper .aboutinn-exp-box{
left:20px;
bottom:20px;
padding:18px 22px;
}

#webnotick-aboutinn-wrapper .aboutinn-exp-box span{
font-size:26px;
}

/* Features */

#webnotick-aboutinn-wrapper .aboutinn-features{
grid-template-columns:1fr;
}

/* Why Cards */

#webnotick-aboutinn-wrapper .aboutinn-box{
padding:35px 22px;
}

/* Heading */

#webnotick-aboutinn-wrapper .aboutinn-heading{
font-size:26px;
margin-bottom:35px;
}

/* Team Cards */

#webnotick-aboutinn-wrapper .aboutinn-team-box img{
height:420px;
}

#webnotick-aboutinn-wrapper .aboutinn-team-section .col-lg-3{
margin-bottom:25px;
}

#webnotick-aboutinn-wrapper .aboutinn-team-box h4{
font-size:18px;
}

#webnotick-aboutinn-wrapper .aboutinn-team-box p{
font-size:14px;
}

}


/* ============================= */
/* SMALL MOBILE (480px) */
/* ============================= */

@media (max-width:480px){

#webnotick-aboutinn-wrapper .aboutinn-content h2{
font-size:24px;
line-height:1.4;
}

#webnotick-aboutinn-wrapper .aboutinn-image img{
height:260px;
margin-bottom:20px;
}

#webnotick-aboutinn-wrapper .aboutinn-features{
grid-template-columns:1fr;
}
#webnotick-aboutinn-wrapper .aboutinn-team-box img{
height:400px;
}

#webnotick-aboutinn-wrapper .aboutinn-team-section .col-lg-3{
margin-bottom:25px;
}

#webnotick-aboutinn-wrapper .aboutinn-box{
padding:30px 20px;
}

#webnotick-aboutinn-wrapper .aboutinn-icon{
width:55px;
height:55px;
}

}

/* TEAM INNER PAGE */

#team-inner-wrapper{
padding:60px 80px;   /* left right spacing */
max-width:1400px;
margin:auto;
}

/* GRID */

#team-inner-wrapper .team-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
}

/* CARD */

#team-inner-wrapper .team-card{
background:#fff;
border-radius:14px;
overflow:hidden;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
transition:all 0.35s ease;
}

#team-inner-wrapper .team-card:hover{
box-shadow:0 20px 40px rgba(0,0,0,0.18);
transform:translateY(-6px);
}

/* IMAGE */

#team-inner-wrapper .team-image{
position:relative;
overflow:hidden;
height:260px;
}

#team-inner-wrapper .team-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:0.5s ease;
}

#team-inner-wrapper .team-card:hover .team-image img{
transform:scale(1.08);
}

/* HOVER OVERLAY */

#team-inner-wrapper .team-social{
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;

background:linear-gradient(
to top,
rgba(12,46,96,0.85) 0%,
rgba(12,46,96,0.55) 40%,
rgba(12,46,96,0.0) 80%
);

display:flex;
align-items:flex-end;
justify-content:center;
padding-bottom:30px;

gap:14px;
opacity:0;
transition:0.4s;
}

#team-inner-wrapper .team-card:hover .team-social{
opacity:1;
}

/* ICON CIRCLES */

#team-inner-wrapper .team-social a{
width:45px;
height:45px;
border-radius:50%;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
color:#000;
transition:0.3s;
}

/* LINKEDIN HOVER */

#team-inner-wrapper .linkedin:hover{
background:#ff6a00;
color:#fff;
}

/* TWITTER HOVER */

#team-inner-wrapper .twitter:hover{
background:#1DA1F2;
color:#fff;
}

/* MAIL HOVER */

#team-inner-wrapper .mailicon:hover{
background:#00C1A3;
color:#fff;
}

/* TEXT AREA */

#team-inner-wrapper .team-info{
padding:26px;
text-align:left;  /* LEFT TEXT */
}

/* NAME */

#team-inner-wrapper .team-info h3{
margin:0;
font-size:22px !important;
font-weight:700;
color:#0c2e60 !important;
}

/* PROFESSION */

#team-inner-wrapper .team-info span{
display:block;
color:#ff6a00;
margin-top:6px;
font-weight:600;
font-size:15px;
}

/* DESCRIPTION */

#team-inner-wrapper .team-info p{
font-size:14px;
margin-top:12px;
line-height:1.7;
color:#555 !important;
}
/* =========================
TEAM VALUES SECTION
========================= */

#team-values-wrapper{
padding:120px 60px;
background:linear-gradient(135deg,#0f3b63,#1c4f7b);
position:relative;
}


/* HEADER */

#team-values-wrapper .values-header{
text-align:center;
max-width:700px;
margin:0 auto 70px;
color:#fff;
}

#team-values-wrapper .values-badge{
display:inline-flex;
align-items:center;
gap:10px;
background:rgba(255,255,255,0.08);
padding:8px 18px;
border-radius:40px;
font-size:14px;
margin-bottom:20px;
}

#team-values-wrapper .values-badge i, #team-values-wrapper .values-badge svg{
color:#ff8a00;
fill:#ff8a00;
font-size:14px;
}


/* TITLE */

#team-values-wrapper .values-header h2{
font-size:46px;
font-weight:700;
margin-bottom:15px;
}

#team-values-wrapper .title-white{
color:#ffffff;
}

#team-values-wrapper .title-orange{
color:#ff8a00;
}


/* SUBTITLE */

#team-values-wrapper .values-header p{
color:#cbd6e2 !important;
font-size:18px;
line-height:1.6;
}


/* GRID */

#team-values-wrapper .values-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}


/* CARD */

#team-values-wrapper .value-card{
background:rgba(255,255,255,0.07);
border:1px solid rgba(255,255,255,0.15);
padding:35px;
border-radius:16px;
transition:all .3s ease;
text-align:left;

backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}

#team-values-wrapper .value-card:hover{
background:#4B76A2;
}


/* ICON BOX */

#team-values-wrapper .icon-box{
width:60px;
height:60px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:20px;
}

#team-values-wrapper .icon-box i, #team-values-wrapper .icon-box svg{
color:#fff;
font-size:22px;
fill: #fff;
}


/* ICON COLORS */

#team-values-wrapper .icon-1{
background:#ff7a00;
}

#team-values-wrapper .icon-2{
background:#00c2cb;
}

#team-values-wrapper .icon-3{
background:#14c8a8;
}

#team-values-wrapper .icon-4{
background:#274c77;
}


/* TITLE */

#team-values-wrapper .value-card h3{
font-size:22px !important;
font-weight:600;
color:#fff;
margin-bottom: 10px;
}


/* TEXT */

#team-values-wrapper .value-card p{
font-size:15px;
color:#d5deea !important;
line-height:1.7;
}
/*top left circle*/
#team-values-wrapper::before{
content:"";
position:absolute;

width:220px;
height:220px;

border-radius:50%;
border:4px solid rgba(0,200,255,0.25);

top:40px;
left:60px;

pointer-events:none;
z-index:1;
}
/*top right circle*/
#team-values-wrapper::after{
content:"";
position:absolute;

width:220px;
height:220px;

border-radius:50%;
border:4px solid rgba(0,200,255,0.25);

bottom:60px;
right:20px;

pointer-events:none;
z-index:1;
}

#team-values-wrapper .values-grid{
position:relative;
z-index:2;
}

/* =========================
TEAM JOIN SECTION
========================= */

#team-join-wrapper{
padding:120px 20px;
background:#f3f4f6;
display:flex;
justify-content:center;
align-items:center;
}

/* MAIN BOX */

#team-join-wrapper .team-join-box{
max-width:900px;
width:100%;
text-align:center;
background:#ffffff;
padding:70px 60px;
border-radius:28px;
border:4px solid #ff6a00;
box-shadow:0 25px 60px rgba(0,0,0,0.08);
position:relative;
}


/* ICON */

#team-join-wrapper .team-join-icon{
font-size:42px;
color:#ff6a00;
margin-bottom:20px;
}

#team-join-wrapper .team-join-icon i,
#team-join-wrapper .team-join-icon svg{
color:#ff6a00;
fill:#ff6a00;
}


/* TITLE */

#team-join-wrapper h2{
font-size:38px !important;
font-weight:700;
color:#0f2a44;
margin-bottom:18px;
}


/* DESCRIPTION */

#team-join-wrapper p{
max-width:620px;
margin:0 auto 35px;
font-size:17px;
line-height:1.7;
color:#5f6f7f;
}


/* BUTTON WRAPPER */

#team-join-wrapper .team-join-buttons{
display:flex;
justify-content:center;
gap:22px;
flex-wrap:wrap;
}


/* BUTTON BASE */

#team-join-wrapper .join-btn{
padding:15px 34px;
border-radius:40px;
font-size:15px;
font-weight:600;
text-decoration:none;
display:inline-block;
transition:all .3s ease;
}


/* PRIMARY BUTTON */

#team-join-wrapper .join-btn-primary{
background:linear-gradient(90deg,#ff6a00,#ff8e00);
color:#fff;
box-shadow:0 8px 20px rgba(255,106,0,0.35);
}

#team-join-wrapper .join-btn-primary:hover{
transform:scale(1.07);
box-shadow:0 12px 30px rgba(255,106,0,0.45);
}

/* SECONDARY BUTTON */

#team-join-wrapper .join-btn-secondary{
background:linear-gradient(90deg,#0fb9c7,#1ad6a5);
color:#fff;
box-shadow:0 8px 20px rgba(0,180,180,0.35);
}

#team-join-wrapper .join-btn-secondary:hover{
transform:scale(1.07);
box-shadow:0 12px 30px rgba(0,180,180,0.45);
}

/* =================================
TABLET RESPONSIVE (1024px)
================================= */

@media (max-width:1024px){

/* TEAM MEMBERS */

#team-inner-wrapper{
padding:50px 40px;
}

#team-inner-wrapper .team-grid{
grid-template-columns:repeat(2,1fr);
gap:30px;
}

#team-inner-wrapper .team-image{
height:260px;
}

#team-inner-wrapper .team-image img{
object-fit:cover;
}

/* TEAM VALUES */

#team-values-wrapper{
padding:90px 40px;
}

#team-values-wrapper .values-grid{
grid-template-columns:repeat(2,1fr);
}

#team-values-wrapper .values-header h2{
font-size:38px;
}

/* TEAM JOIN */

#team-join-wrapper .team-join-box{
padding:60px 40px;
}

#team-join-wrapper h2{
font-size:32px !important;
}

#team-join-wrapper .team-join-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
flex-direction:row;
}

}



/* =================================
MOBILE RESPONSIVE (768px)
================================= */

@media (max-width:768px){

/* TEAM MEMBERS */

#team-inner-wrapper{
padding:40px 20px;
}

#team-inner-wrapper .team-grid{
grid-template-columns:1fr;
gap:25px;
}

#team-inner-wrapper .team-image{
height:400px;
}

/* TEAM VALUES */

#team-values-wrapper{
padding:70px 20px;
}

#team-values-wrapper .values-grid{
grid-template-columns:1fr;
gap:25px;
}

#team-values-wrapper .values-header h2{
font-size:32px;
}

#team-values-wrapper .values-header p{
font-size:16px;
}

/* CIRCLES SMALLER */

#team-values-wrapper::before{
width:150px;
height:150px;
left:20px;
}

#team-values-wrapper::after{
width:150px;
height:150px;
right:10px;
}

/* TEAM JOIN */

#team-join-wrapper{
padding:80px 20px;
}

#team-join-wrapper .team-join-box{
padding:50px 25px;
border-radius:20px;
}

#team-join-wrapper h2{
font-size:28px !important;
}

#team-join-wrapper p{
font-size:15px;
}

#team-join-wrapper .team-join-buttons{
display: flex;
gap:15px;
align-items:center;
}

#team-join-wrapper .join-btn{
width:auto;
}

}



/* =================================
SMALL MOBILE (480px)
================================= */

@media (max-width:480px){

#team-inner-wrapper{
padding:30px 15px;
}

#team-values-wrapper{
padding:60px 15px;
}

#team-values-wrapper .values-header h2{
font-size:26px;
}

#team-join-wrapper h2{
font-size:24px !important;
}

#team-join-wrapper .team-join-icon{
font-size:34px;
}

#team-join-wrapper .team-join-buttons{
flex-direction:column;
align-items:center;
gap:15px;
}

}
/*FAQ Inner Page */
#webnotick-faq-inner{
max-width:900px;
margin:auto;
}

#webnotick-faq-inner .webnotick-faq-category{
margin-bottom:40px;
}

#webnotick-faq-inner .webnotick-faq-category-title{
display:inline-flex;
align-items:center;
gap:10px;
background:#eaf3f6;
padding:12px 22px;
border-radius:30px;
font-weight:600;
color:#0b4a7a;
margin-bottom:20px;
margin-top: 20px;
}

#webnotick-faq-inner .webnotick-faq-dot{
width:10px;
height:10px;
border-radius:50%;
}

#webnotick-faq-inner .webnotick-faq-category:nth-child(1) .webnotick-faq-dot{
background:#ff6a00;
}

#webnotick-faq-inner .webnotick-faq-category:nth-child(2) .webnotick-faq-dot{
background:#0099BC;
}

#webnotick-faq-inner .webnotick-faq-category:nth-child(3) .webnotick-faq-dot{
background:#28a745;
}

#webnotick-faq-inner .webnotick-faq-category:nth-child(4) .webnotick-faq-dot{
background:#2F80ED;
}

#webnotick-faq-inner .webnotick-faq-item{
background:#fff;
border-radius:12px;
margin-bottom:15px;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
overflow:visible;
}

#webnotick-faq-inner .webnotick-faq-question{
width:100%;
padding:20px;
border:none;
background:#fff;
text-align:left;
font-size:18px;
font-weight:600;
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
position:relative;
z-index:2;
color: #0a2540;;
}

#webnotick-faq-inner .webnotick-faq-icon{
color:#ff6a00;
transition:0.3s;
}

#webnotick-faq-inner .webnotick-faq-answer{
display:none;
padding:0 20px 20px;
color:#555 !important;
line-height:1.6;
}

#webnotick-faq-inner .webnotick-faq-item.active .webnotick-faq-answer{
display:block;
}

#webnotick-faq-inner .webnotick-faq-item.active .webnotick-faq-icon{
transform:rotate(180deg);
}
#webnotick-faq-inner button{
text-decoration:none;
}

#webnotick-faq-inner button:hover{
text-decoration:none;
}

/* General Questions */
#webnotick-faq-inner .webnotick-faq-category:nth-child(1) .webnotick-faq-category-title{
background:#FFE8D6;
color:#ff6a00;
}

/* Booking & Scheduling */
#webnotick-faq-inner .webnotick-faq-category:nth-child(2) .webnotick-faq-category-title{
background:#E1F9FF;
color:#0099BC;
}

/* Pricing & Payment */
#webnotick-faq-inner .webnotick-faq-category:nth-child(3) .webnotick-faq-category-title{
background:#E7F9EF;
color:#28a745;
}

/* Service Details */
#webnotick-faq-inner .webnotick-faq-category:nth-child(4) .webnotick-faq-category-title{
background:#E8F1FF;
color:#2F80ED;
}

#webnotick-faq-inner .webnotick-faq-item.active{
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}
#webnotick-faq-inner .webnotick-faq-question{
cursor:pointer;
}

/* ============================= */
/* Tablet Responsive */
/* ============================= */

@media (max-width:992px){

#webnotick-faq-inner{
max-width:100%;
padding:0 20px;
}

#webnotick-faq-inner .webnotick-faq-question{
font-size:17px;
padding:18px;
}

#webnotick-faq-inner .webnotick-faq-category-title{
font-size:15px;
padding:10px 18px;
margin-top: 20px;
}

#webnotick-faq-inner .webnotick-faq-answer{
font-size:15px;
}

}


/* ============================= */
/* Mobile Responsive */
/* ============================= */

@media (max-width:768px){

#webnotick-faq-inner{
padding:0 15px;
}

#webnotick-faq-inner .webnotick-faq-question{
font-size:16px;
padding:16px;
gap:10px;
}

#webnotick-faq-inner .webnotick-faq-category-title{
font-size:14px;
padding:9px 16px;
margin-top: 20px;
}

#webnotick-faq-inner .webnotick-faq-answer{
font-size:14px;
line-height:1.7;
padding:0 16px 18px;
}

#webnotick-faq-inner .webnotick-faq-item{
border-radius:10px;
}

}


/* ============================= */
/* Small Mobile Responsive */
/* ============================= */

@media (max-width:480px){

#webnotick-faq-inner{
padding:0 12px;
}

#webnotick-faq-inner .webnotick-faq-question{
font-size:15px;
padding:14px;
}

#webnotick-faq-inner .webnotick-faq-category-title{
font-size:13px;
padding:8px 14px;
margin-top: 20px;
}

#webnotick-faq-inner .webnotick-faq-answer{
font-size:13px;
line-height:1.6;
}

#webnotick-faq-inner .webnotick-faq-icon{
font-size:14px;
}

}

/*===============================
Testimonials Inner Page
================================*/

#webnotick-testimonial-inner-wrapper{
padding:60px 80px;
background:#f8fafc;
}

/* GRID */

#webnotick-testimonial-inner-wrapper .webnotick-testimonial-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
}

/* CARD */

#webnotick-testimonial-inner-wrapper .webnotick-testimonial-card{
position:relative;
background:#fff;
padding:40px 35px;
border-radius:16px;
box-shadow:0 8px 25px rgba(0,0,0,0.07);
transition:all 0.35s ease;
}

#webnotick-testimonial-inner-wrapper .webnotick-testimonial-card:hover{
box-shadow:0 18px 45px rgba(0,0,0,0.15);
}

/* QUOTE BOX */

#webnotick-testimonial-inner-wrapper .webnotick-quote{
position:absolute;
top:-22px;
left:-20px;
background:#ff6a00;
width:55px;
height:55px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:22px;
transform:rotate(-10deg);
box-shadow:0 10px 20px rgba(255,106,0,0.35);
}

/* STARS */

#webnotick-testimonial-inner-wrapper .webnotick-stars{
margin-bottom:15px;
}

#webnotick-testimonial-inner-wrapper .webnotick-stars .star{
color:#ddd;
font-size:18px;
margin-right:3px;
}

#webnotick-testimonial-inner-wrapper .webnotick-stars .filled{
color:#f4b400;
}

/* TESTIMONIAL TEXT */

#webnotick-testimonial-inner-wrapper .webnotick-testimonial-text{
color:#6b7280;
font-size:15px;
line-height:1.7;
margin-bottom:18px;
}

/* BADGE */

#webnotick-testimonial-inner-wrapper .webnotick-badge{
display:inline-flex;
align-items:center;
gap:8px;
background:#e6f7fb;
color:#008aa5;
padding:7px 16px;
border-radius:25px;
font-size:14px;
font-weight:500;
margin-bottom:20px;
margin-top: 20px;
}

#webnotick-testimonial-inner-wrapper .webnotick-badge-dot{
width:8px;
height:8px;
background:#008aa5;
border-radius:50%;
display:inline-block;
}

/* Title */

#webnotick-testimonial-inner-wrapper .webnotick-title{
font-family:'Inter',sans-serif !important;
font-size:18px !important;
font-weight:200 !important;
color:#46465e !important;
margin-bottom:4px !important;
font-style: italic;
}

/*Divider*/
#webnotick-testimonial-inner-wrapper .webnotick-divider{
height:1px;
background:#e5e7eb;
margin-bottom:10px ;
}

/*Designation(Person name)*/
#webnotick-testimonial-inner-wrapper .webnotick-designation{
font-size:18px !important;
font-weight:700;
color:#0a2540 !important;
margin-bottom:4px;
}

/* PROFESSION */

#webnotick-testimonial-inner-wrapper .webnotick-profession{
color:#ff6a00;
font-size:14px;
margin:3px 0;
}

/* LOCATION */

#webnotick-testimonial-inner-wrapper .webnotick-location-text{
font-size:13px;
color:#6b7280;
}

/* DATE */

#webnotick-testimonial-inner-wrapper .webnotick-date{
font-size:13px;
color:#6b7280;
}

#webnotick-testimonial-inner-wrapper .webnotick-dot{
font-size:6px;
margin:0 8px;
color:#6b7280 !important;
vertical-align:middle;
}

/* =================================
Review (Testimonials ) Section
================================= */

#webnotick-review-cta{
padding:90px 20px;
display:flex;
justify-content:center;
}

#webnotick-review-cta .webnotick-review-container{
max-width:950px;
width:100%;
background:#fff;
border:3px solid #ff6a00;
border-radius:28px;
padding:70px 40px;
text-align:center;
box-shadow:0 25px 60px rgba(0,0,0,0.08);
}

/* ICON */

#webnotick-review-cta .webnotick-review-icon{
font-size:40px;
color:#ff6a00;
margin-bottom:18px;
}

/* TITLE */

#webnotick-review-cta .webnotick-review-title{
font-size:34px;
font-weight:700;
color:#0a2540 !important;
margin-bottom:12px;
}

/* DESCRIPTION */

#webnotick-review-cta .webnotick-review-desc{
font-size:18px;
color:#64748b;
line-height:1.7;
max-width:620px;
margin:0 auto 35px auto;
}

/* BUTTONS */

#webnotick-review-cta .webnotick-review-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

/* BUTTON 1 */

#webnotick-review-cta .webnotick-review-btn1{
background:linear-gradient(90deg,#ff6a00,#ff7e00);
color:#fff;
padding:14px 30px;
border-radius:40px;
font-weight:600;
text-decoration:none;
display:inline-flex;
align-items:center;
gap:10px;
transition:0.3s;
}

#webnotick-review-cta .webnotick-review-btn1:hover{
transform:scale(1.07);
box-shadow:0 10px 25px rgba(255,106,0,0.35);
}

.webnotick-review-btn1 .review-btn1-icon {
    color: #fff; /* yaha apna color dal sakte ho */
    font-size: 16px; /* optional */
    margin-right: 3px; /* spacing ke liye */
    font-weight: 600;
}

/* BUTTON 2 */

#webnotick-review-cta .webnotick-review-btn2{
background:linear-gradient(90deg,#0fb9c7,#1ad6a5);
color:#fff;
padding:14px 30px;
border-radius:40px;
font-weight:600;
text-decoration:none;
transition:0.3s;
}

#webnotick-review-cta .webnotick-review-btn2:hover{
transform:scale(1.07);
box-shadow:0 10px 25px rgba(15,185,199,0.35);
}

/* ================================
TABLET
================================ */

@media (max-width:1024px){

#webnotick-testimonial-inner-wrapper{
padding:60px 40px;
}

#webnotick-testimonial-inner-wrapper .webnotick-testimonial-grid{
grid-template-columns:repeat(2,1fr);
gap:30px;
}

#webnotick-review-cta .webnotick-review-container{
padding:60px 35px;
}

}
/* ================================
MOBILE
================================ */

@media (max-width:768px){

#webnotick-testimonial-inner-wrapper{
padding:50px 20px;
}

#webnotick-testimonial-inner-wrapper .webnotick-testimonial-grid{
grid-template-columns:1fr;
gap:35px;
}

#webnotick-testimonial-inner-wrapper .webnotick-testimonial-card{
padding:35px 25px;
}

#webnotick-review-cta{
padding:70px 20px;
}

#webnotick-review-cta .webnotick-review-container{
padding:50px 25px;
}

#webnotick-review-cta .webnotick-review-title{
font-size:26px;
}

#webnotick-review-cta .webnotick-review-desc{
font-size:16px;
}

}
/* ================================
SMALL MOBILE
================================ */

@media (max-width:480px){

#webnotick-testimonial-inner-wrapper{
padding:40px 15px;
}

#webnotick-testimonial-inner-wrapper .webnotick-testimonial-card{
padding:30px 20px;
}

#webnotick-testimonial-inner-wrapper .webnotick-quote{
width:45px;
height:45px;
font-size:18px;
top:-18px;
left:-15px;
}

#webnotick-review-cta .webnotick-review-title{
font-size:22px;
}

#webnotick-review-cta .webnotick-review-desc{
font-size:15px;
}

#webnotick-review-cta .webnotick-review-buttons{
display:flex;
flex-direction:row;
justify-content:center;
gap:18px;
flex-wrap:wrap;
}

#webnotick-review-cta .webnotick-review-btn1{
padding:14px 30px;
}

#webnotick-review-cta .webnotick-review-btn2{
padding:14px 24px;
}

}

/*Pricing Inner Page*/
/* SECTION */
#pricing-inner-wrapper {
    padding: 80px 10px;   /* 👈 side space kam */
    max-width: 1300px;    /* 👈 content control */
    margin: 0 auto;       /* 👈 center align */
    text-align: center;
}

/* HEADER */
#pricing-inner-wrapper .pricing-badge{
    color:#ff6a00;
    font-weight:600;
    letter-spacing:1px;
    font-size:13px;
}

#pricing-inner-wrapper .pricing-title{
    font-size:44px;
    font-weight:700;
    color:#0a2540; /* dark blue */
}

#pricing-inner-wrapper .pricing-subtitle{
    color:#6b7280;
    max-width:700px;
    margin:10px auto 0;
}

/* CARDS WRAPPER */
#pricing-inner-wrapper #pricing-cards{
    display:flex;
    gap:20px;              /* 👈 cards ke beech space kam */
    justify-content:center;
    margin-top:60px;
    flex-wrap:wrap;
}

/* CARD */
#pricing-inner-wrapper .pricing-card{
    background:#fff;
    padding:40px 30px;
    border-radius:16px;
    width:380px; /* ✅ width increase */
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
    position:relative;
    transition:0.3s ease;
}

/* HOVER EFFECT */
#pricing-inner-wrapper .pricing-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 50px rgba(0,0,0,0.1);
}

/* ACTIVE (MIDDLE CARD) */
#pricing-inner-wrapper .pricing-card.active{
    border:5px solid #ff6a00;
}

/* POPULAR BADGE (INSIDE CARD) */
#pricing-inner-wrapper .pricing-card.active .popular-badge{
    position:absolute;
    top:0;
    left:0;
    right:0;
    transform:none;
    border-radius:12px 12px 0 0;
    background:#ff6900;
    padding:10px;
    font-size:14px;
    font-weight:600;
    color: #fff;
}

/* PLAN TITLE */
#pricing-inner-wrapper .plan-title{
    font-size:24px !important; /* ✅ smaller */
    font-weight:600;
    color:#0f172a !important;
    margin-top: 20px;
}

/* DESCRIPTION */
#pricing-inner-wrapper .plan-desc{
    font-size:14px;
    color:#4a5565;
    margin-bottom:15px;
}

/* PRICE WRAPPER */
#pricing-inner-wrapper .price{
    font-size:42px;
    font-weight:700;
    color:#0f172a;
    display:flex;
    justify-content:center;
    align-items:flex-start; /* 🔥 important */
    gap:4px;
}

/* $ SYMBOL */
#pricing-inner-wrapper .price .currency{
    font-size:18px;      /* 👈 chhota */
    position:relative;
    top:6px;  
    color: #0a2540;           /* 👈 neeche adjust (fine tune karo) */
}

/* NUMBER */
#pricing-inner-wrapper .price .amount{
    font-size:48px;
    line-height:1;
    color: #0a2540;
    font-weight: 700;
}

/* $ SIGN */
#pricing-inner-wrapper .price::before{
    content:"";
}

/* PER TEXT */
#pricing-inner-wrapper .per{
    color:#4a5565;
    font-size:14px;
}

/* FEATURES */
#pricing-inner-wrapper .features{
    list-style:none;
    padding:0;
    margin-top:20px;
    text-align:left;
}

/* REMOVE YELLOW ARROW */
#pricing-inner-wrapper .features li::before{
    display:none !important;
}

/* FEATURE ITEM TEXT DEFAULT */
#pricing-inner-wrapper .features li{
    display:flex;
    align-items:center;
    gap:10px;
    margin:14px 0;
    font-size:16px;
}

/* ✔ ACTIVE TEXT (dark grey) */
#pricing-inner-wrapper .features li.active{
    color:#374151; /* 👈 dark grey */
}

/* ❌ DISABLE TEXT (light grey) */
#pricing-inner-wrapper .features li.disable{
    color:#9ca3af; /* 👈 light grey */
}

/* ICON WRAPPER (CIRCLE) */
#pricing-inner-wrapper .features li .featureinn-icon{
    width:26px;
    height:26px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

/* ICON SIZE */
#pricing-inner-wrapper .features li .featureinn-icon i,svg#pricing-inner-wrapper .features li .featureinn-icon svg{
    font-size:12px;
    line-height:1;
}

/* ✔ ACTIVE ICON */
#pricing-inner-wrapper .features li.active .featureinn-icon{
    background:#d1fae5 !important;
}

#pricing-inner-wrapper .features li.active .featureinn-icon i,
#pricing-inner-wrapper .features li.active .featureinn-icon svg{
    color:#22c55e !important;
    fill:#22c55e !important;
}

/* ❌ DISABLE ICON */
#pricing-inner-wrapper .features li.disable .featureinn-icon{
    background:#f3f4f6 !important;
}

#pricing-inner-wrapper .features li.disable .featureinn-icon i,
#pricing-inner-wrapper .features li.disable .featureinn-icon svg{
    color:#9ca3af !important;
    fill:#9ca3af !important;
}

/* BUTTON */
#pricing-inner-wrapper .pricing-btn{
    width:100%;
    padding:14px;
    border:none;
    border-radius:20px;
    margin-top:25px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}

/* DEFAULT BUTTON (1st & 3rd) */
#pricing-inner-wrapper .pricing-card:not(.active) .pricing-btn{
    background:linear-gradient(90deg,#0fb9c7,#1ad6a5);
    color:#fff;
}

/* ACTIVE BUTTON (2nd CARD) */
#pricing-inner-wrapper .pricing-card.active .pricing-btn{
    background: linear-gradient(90deg, #FF6D00 0%, #E65100 100%);
    color:#fff;
}

/* BUTTON HOVER */
#pricing-inner-wrapper .pricing-card:not(.active) .pricing-btn:hover{
    background: linear-gradient(to right, #009b95 0%, #00738c 100%);
    transform: translateY(-2px);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    text-decoration:none ;
}

#pricing-inner-wrapper .pricing-card.active .pricing-btn:hover{
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to bottom, #e34105 0%, #ba3500 100%);
    transform: translateY(-2px);
    text-decoration: none;
}
/* =========================
    MOBILE (0px – 767px)
========================= */
@media (max-width: 767px){

    #pricing-inner-wrapper{
        padding:50px 15px;
    }

    /* STACK CARDS */
    #pricing-inner-wrapper #pricing-cards{
        flex-direction:column;
        align-items:center;
        gap:25px;
    }

    /* CARD FULL WIDTH */
    #pricing-inner-wrapper .pricing-card{
        width:100%;
        max-width:100%;
        padding:30px 20px;
    }

    /* TITLE */
    #pricing-inner-wrapper .pricing-title{
        font-size:28px;
    }

    /* SUBTITLE */
    #pricing-inner-wrapper .pricing-subtitle{
        font-size:14px;
    }

    /* PLAN TITLE */
    #pricing-inner-wrapper .plan-title{
        font-size:20px !important;
    }

    /* PRICE */
    #pricing-inner-wrapper .price{
        font-size:32px;
    }

    #pricing-inner-wrapper .price .amount{
        font-size:36px;
    }

    /* FEATURES TEXT */
    #pricing-inner-wrapper .features li{
        font-size:14px;
    }

    /* BUTTON */
    #pricing-inner-wrapper .pricing-btn{
        padding:12px;
        font-size:14px;
    }
}


/* =========================
   TABLET (768px – 1024px)
========================= */
@media (min-width:768px) and (max-width:1024px){

    #pricing-inner-wrapper{
        padding:60px 20px;
    }

    #pricing-inner-wrapper #pricing-cards{
        flex-wrap:nowrap;
        gap:15px;
    }

    #pricing-inner-wrapper .pricing-card{
        width:33.33%;
        max-width:none;
        padding:30px 15px;
    }

    /* TITLE */
    #pricing-inner-wrapper .pricing-title{
        font-size:36px;
    }

    /* PRICE */
    #pricing-inner-wrapper .price{
        font-size:36px;
    }

    #pricing-inner-wrapper .price .amount{
        font-size:42px;
    }
}


/* =========================
    SMALL LAPTOP (1025px – 1200px)
========================= */
@media (min-width:1025px) and (max-width:1200px){

    #pricing-inner-wrapper .pricing-card{
        width:30%;
    }

    #pricing-inner-wrapper #pricing-cards{
        gap:15px;
    }
}

/* ================= COMPARE SECTION ================= */

/* ================= SECTION BACKGROUND ================= */
#pricing-compare-wrapper{
    padding:80px 20px;
    background:linear-gradient(180deg,#e6eef5,#f8fbfd);
}

/* HEADER */
#pricing-compare-wrapper .compare-header{
    text-align:center;
    margin-bottom:50px;
}

#pricing-compare-wrapper .compare-badge{
    color:#f97316;
    font-size:13px;
    font-weight:600;
    letter-spacing:1px;
}

#pricing-compare-wrapper .compare-title{
    font-size:36px;
    font-weight:700;
    margin-top:10px;
    color:#0a2540;
}

/* TABLE BOX */
#pricing-compare-wrapper .compare-table{
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
    max-width:1200px;
    margin:0 auto;
}

/* ROW */
#pricing-compare-wrapper .compare-row{
    display:flex;
    align-items:center;
}

/* HEAD ROW COLORS */
#pricing-compare-wrapper .compare-head .col:nth-child(1){
    background:#1e3a8a;
    color:#fff;
}

#pricing-compare-wrapper .compare-head .col:nth-child(2){
    background:#006283;
    color:#fff;
}

#pricing-compare-wrapper .compare-head .col:nth-child(3){
    background:#f97316;
    color:#fff;
}

#pricing-compare-wrapper .compare-head .col:nth-child(4){
    background:#0f766e;
    color:#fff;
}

/* COLUMN */
#pricing-compare-wrapper .col{
    flex:1;
    padding:16px 18px;
    text-align:center;
    border-bottom:1px solid #e5e7eb;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f9fafb;
}

/* FEATURE COLUMN */
#pricing-compare-wrapper .col.feature{
    justify-content:flex-start;
    font-weight:500;
    color: #364153;
}

/* STANDARD COLUMN BACKGROUND */
/* ONLY BODY rows ke liye */
#pricing-compare-wrapper .compare-row:not(.compare-head) .col:nth-child(3){
    background:#fff7ed;
}

/* ICON STYLE */
#pricing-compare-wrapper .compare-icon{
    width:30px;
    height:30px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
}

/* YES */
#pricing-compare-wrapper .compare-icon.yes{
    background:#d1fae5;
    color:#22c55e;
}

/* NO */
#pricing-compare-wrapper .compare-icon.no{
    background:#f3f4f6;
    color:#9ca3af;
}

#pricing-compare-wrapper .compare-row{
    display:flex;
    align-items:stretch; /* IMPORTANT */
}
/* HOVER - OTHER COLUMNS */
#pricing-compare-wrapper .compare-row:not(.compare-head):hover .col:not(:nth-child(3)){
    background:#e0f2fe !important;
}

/* HOVER - 3rd COLUMN (KEEP ORIGINAL COLOR) */
#pricing-compare-wrapper .compare-row:not(.compare-head):hover .col:nth-child(3){
    background:#fff7ed !important; /* same as normal */
}
/* TABLET + MOBILE SAME */
@media (max-width: 992px){

    #pricing-compare-wrapper .compare-table{
        overflow-x:auto;
    }

    #pricing-compare-wrapper .compare-row{
        min-width:700px;
    }

}

/*404 Page*/
#webnotick-404-page{
    background:#1e4c72;
}

#webnotick-404-page .custom-404-section{
    padding:100px 20px;
    text-align:center;
    color:#fff;
}

body.error404 #webnotick-404-page .custom-404-section{
    padding-top:240px; /*  is value ko adjust kar sakte ho */
}

/* Badge */
#webnotick-404-page .badge-404{
    display:inline-block;
    background:rgba(255,255,255,0.1);
    padding:6px 15px;
    border-radius:20px;
    margin-bottom:20px;
    color: #fff;
}

/*Badge Icon*/
#webnotick-404-page .badge-404 i, #webnotick-404-page .badge-404 svg{
    margin-right:6px;
    color:#ff8a00;
}

/*404*/
#webnotick-404-page .bg-404-text{
    position:absolute;
    top:35%; /*  50% se kam karo (upar aa jayega) */
    left:50%;
    transform:translate(-50%,-50%);
    font-size:300px;
    font-weight:800;
    color:rgba(255,255,255,0.05);
    z-index:0;
    pointer-events:none;
}

/* Title */
#webnotick-404-page .title-404{
    font-size:48px;
    font-weight:700;
    color: #fff;
    position:relative;
    z-index:2;
}

#webnotick-404-page .title-404 span{
    display:block;
    color:#ff8904;
}

/* Description */
#webnotick-404-page .desc-404{
    margin:20px auto;
    max-width:650px;
    font-size:18px;
    color:rgba(255,255,255,0.75);
    line-height:1.7;
}

/* Buttons */
#webnotick-404-page .btn-group{
    margin-top:30px;
}

#webnotick-404-page .btn-primary{
    background:#FF5E00;
    padding:12px 25px;
    border-radius:30px;
    color:#fff;
    margin-right:10px;
    display:inline-block;
}

#webnotick-404-page .btn-secondary{
    border:1px solid #fff;
    padding:12px 25px;
    border-radius:30px;
    color:#fff;
    background:rgba(255,255,255,0.07) !important;
    display:inline-block;
}

/*Button Hover*/

#webnotick-404-page .btn-primary:hover{
transform:scale(1.07);
}

#webnotick-404-page .btn-secondary:hover{
background:#FFFFFF33 !important;
}

#webnotick-404-page{
    display:block !important;
    visibility:visible !important;
}
/*Button1 icon*/
#webnotick-404-page .btn-primary i, #webnotick-404-page .btn-primary svg{    
    margin-right:8px;
    color: #fff;
    font-size: 16x;
}
/*Button2 icon*/
#webnotick-404-page .btn-secondary i, #webnotick-404-page .btn-secondary svg{
    margin-right:8px;
    color: #fff;
    font-size: 16px;
}

/*Quick Links Box*/
#webnotick-404-page .quick-links-box{
    position:relative;
    z-index:2; /*  sabse upar */
    margin:60px auto 0;
    max-width:700px;
    padding:25px 30px;
    border-radius:20px;

    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(15px); /*  blur effect */
    -webkit-backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,0.15); /* glass border */
}

#webnotick-404-page .quick-links-box h3{
    font-size:24px;   /*  text bada */
    margin-bottom:20px; /*  neeche space */
    font-weight:600;
    color: #fff;
}

#webnotick-404-page .quick-links-box h3 i, #webnotick-404-page .quick-links-box h3 svg{
    color:#00d4ff;
}

#webnotick-404-page .links-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px 25px; /* row + column spacing */
    margin-top:10px;
}

#webnotick-404-page .links-grid a{
    color:#7fe0ff;
    text-decoration:none;
}

#webnotick-404-page .links-grid a:hover{
    color:#ff8904;
    display:inline-block;
}

/*Circles*/
#webnotick-404-page .circle{
    position:absolute;
    border:3px solid rgba(0,255,255,0.2);
    border-radius:50%;
}

#webnotick-404-page .circle1{
    width:200px;
    height:200px;
    top:180px;
    left:50px;
}

#webnotick-404-page .circle2{
    width:150px;
    height:150px;
    top:250px;
    right:370px;
}

#webnotick-404-page .circle3{
    width:300px;
    height:300px;
    bottom:50px;
    right:80px;
}

/* Sirf inner page banner / breadcrumb hide */
body.error404 #page-site-header {
    display:none !important;
}

/* =========================
   404 RESPONSIVE CSS
========================= */

/* Mobile Devices (<= 768px) */

@media (max-width: 768px){

    body.error404 #webnotick-404-page .custom-404-section{
        padding:140px 15px 80px;
    }

    #webnotick-404-page .title-404{
        font-size:30px;
        line-height:1.3;
    }

    #webnotick-404-page .desc-404{
        font-size:15px;
        padding:0 10px;
    }

    #webnotick-404-page .bg-404-text{
        font-size:120px;
        top:25%;
    }

/* BUTTON MOBILE FIX (as per requirement) */
#webnotick-404-page .btn-group{
    display:flex;
    flex-direction:column;   /*  ek ke niche ek */
    align-items:center;      /*  center align */
    gap:12px;
}

/*  First Button (BADA) */
#webnotick-404-page .btn-primary{
    width:100%;              /*  full width */
    max-width:200px;         /*  control width */
    text-align:center;
}

/*  Second Button (CHOTA) */
#webnotick-404-page .btn-secondary{
    width:auto;              /*  content size */
    text-align:center;
}

    /*  QUICK LINKS = 2 COLUMN */
    #webnotick-404-page .links-grid{
        grid-template-columns:repeat(2,1fr); /*  2 column */
        text-align:center;
    }

    /* optional: thoda spacing improve */
    #webnotick-404-page .links-grid a{
        display:block;
    }

    /* circles optional */
    #webnotick-404-page .circle{
        display:none;
    }
}

/* Small Mobile (<= 480px) */
@media (max-width: 480px){

    #webnotick-404-page .title-404{
        font-size:26px;
    }

    #webnotick-404-page .bg-404-text{
        font-size:90px;
    }

    #webnotick-404-page .badge-404{
        font-size:13px;
        padding:5px 12px;
    }

    #webnotick-404-page .quick-links-box h3{
        font-size:18px;
    }
}
/* Large Tablets (<= 992px) */
/*  TABLET = DESKTOP LOOK */
@media (min-width: 768px) and (max-width: 1024px){

    /* buttons same like desktop */
    #webnotick-404-page .btn-group{
        display:block;
    }

    #webnotick-404-page .btn-primary,
    #webnotick-404-page .btn-secondary{
        width:auto;
        margin-right:10px;
    }

    /* quick links 4 column (desktop jaisa) */
    #webnotick-404-page .links-grid{
        grid-template-columns:repeat(4,1fr);
    }

    /* circles visible */
    #webnotick-404-page .circle{
        display:block;
    }
        #webnotick-404-page .circle1{
        width:200px;
        height:200px;
        top:180px;
        left:30px;
    }

    #webnotick-404-page .circle2{
        width:150px;
        height:150px;
        top:220px;
        right:100px;
    }

    #webnotick-404-page .circle3{
        width:300px;
        height:300px;
        bottom:30px;
        right:20px;
    }
}

/*Project Inner Page*/

#webnotick-projects-section{
    max-width:1200px;   /* control width */
    margin:0 auto;      /* center */
    padding:40px 20px 80px; /* top thoda kam */
}

/* STICKY FILTER WRAPPER */
#webnotick-projects-section .projects-filter-wrap{
    position: sticky;
    top: 80px; /* 👈 IMPORTANT (header height ke equal) */
    z-index: 999;
    background: #fff;
    padding: 15px 0;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    border-bottom: 1px solid #eee;
}

/* FILTER */
#webnotick-projects-section .projects-filter{
    display:flex;
    gap:15px;
    justify-content:center;
    flex-wrap:wrap;
}

#webnotick-projects-section .projects-filter button{
    padding:10px 20px;
    border-radius:30px;
    border:none;
    background:#eaeaea;
    color:#333;
    cursor:pointer;
    transition:0.3s;
    font-weight:500;
}

#webnotick-projects-section .projects-filter button.active,
#webnotick-projects-section .projects-filter button:hover{
    background:#ff5e00;
    color:#fff;
    text-decoration: none;
}

/* divider line */
#webnotick-projects-section .filter-divider{
    width:100%;
    height:1px;
    background:#ddd;
    margin-bottom:40px;
}

/* GRID */
#webnotick-projects-section .projects-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:25px;
}

/* CARD */
#webnotick-projects-section .project-card{
    margin-bottom:30px;
    break-inside:avoid;
    display:inline-block;
    width:100%;
}

/* IMAGE */
#webnotick-projects-section .project-img{
    position:relative;
    border-radius:20px;
    overflow:hidden;
}

#webnotick-projects-section .project-img img{
    width:100%;
    height:auto;
    display:block;
    border-radius:20px;
}

/* ZOOM */
#webnotick-projects-section .project-img:hover img{
    transform:scale(1.1);
}

/* BADGE */
#webnotick-projects-section .project-badge{
    position:absolute;
    top:15px;
    left:15px;
    background:#fff;
    color:#333;
    padding:6px 12px;
    border-radius:20px;
    font-size:13px;
    font-weight:500;
}

/* OVERLAY */
#webnotick-projects-section .project-overlay{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:20px;
    background:linear-gradient(to top, rgba(0,40,80,0.9), transparent);
    opacity:0;
    transition:0.4s;
}

/* SHOW ON HOVER */
#webnotick-projects-section .project-img:hover .project-overlay{
    opacity:1;
}

/* TITLE */
#webnotick-projects-section .project-overlay h3{
    color:#fff !important;
    margin-bottom:10px !important;
    font-size:20px !important;
}

/*  View BUTTON */
#webnotick-projects-section .view-btn{
    display:inline-block;
    padding:10px 20px;
    background:#ff5e00;
    color:#fff;
    border-radius:30px;
    text-decoration:none;
    font-size:14px;
}

/* View Button Icon*/
#webnotick-projects-section .project-overlay i, #webnotick-projects-section .project-overlay svg{
    color: #fff;
    margin-left: 6px;
}

/*Bottom Button */
#webnotick-projects-section .hidden-project{
    display:none;
}

#webnotick-projects-section .load-more-wrap{
    text-align:center;
    margin-top:40px;
}

#webnotick-projects-section #load-more-btn{
    padding:12px 30px;
    background:#ff5e00;
    color:#fff;
    border:none;
    border-radius:30px;
    cursor:pointer;
}
#webnotick-projects-section #load-more-btn:hover{
transform:scale(1.07);
text-decoration: none;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
/**Responsive**/

@media (max-width: 576px){

    #webnotick-projects-section{
        padding:30px 15px 60px;
    }

    #webnotick-projects-section .projects-grid{
        grid-template-columns: 1fr;
    }

    /* 🔥 FILTER FIX (LIKE YOUR SCREENSHOT) */
    #webnotick-projects-section .projects-filter{
        justify-content:center;
        flex-wrap:wrap;   /* 👈 wrap enable */
        gap:20px;
    }

    #webnotick-projects-section .projects-filter button{
        flex:0 0 auto;
        font-size:13px;
        padding:8px 14px;
    }

    #webnotick-projects-section .projects-filter-wrap{
        top:60px;
        padding:12px 10px;
        border-radius:12px; /* optional nice look */
    }

}
/*Tablet*/
@media (max-width: 991px){

    #webnotick-projects-section .projects-grid{
        grid-template-columns: repeat(2, 1fr);
    }

    #webnotick-projects-section .projects-filter-wrap{
        top:70px; /* tablet header height */
    }

}

/* Before & After Section Main Container */
#before-after-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
}

/* GRID */
#before-after-section .ba-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* CARD - Added Border and Smooth Transition */
#before-after-section .ba-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    /* Light Blue Border as per your request */
    border: 1px solid #e1e8f0; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: all 0.3s ease; /* Smooth hover effect ke liye */
}

/* HOVER EFFECT - Shadow on Hover */
#before-after-section .ba-card:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12); /* Card ke piche shadow aa jayegi */
    border-color: #cbd5e0; /* Hover par border thodi dark hogi */
}

/* IMAGE WRAP */
#before-after-section .ba-img-wrap {
    display: flex;
}

/* IMAGE */
#before-after-section .ba-img {
    width: 50%;
    position: relative;
}

#before-after-section .ba-img img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

/* LABEL COMMON STYLES */
#before-after-section .label {
    position: absolute;
    bottom: 12px;
    padding: 6px 15px;
    border-radius: 20px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* BEFORE LABEL - Left side */
#before-after-section .before-label {
    background: #ff3b3b;
    left: 10px;
}

/* AFTER LABEL - Moved to Right Side (Updated) */
#before-after-section .after-label {
    background: #00c853;
    right: 10px; /* Isse label right side chala jayega */
    left: auto;  /* Left position reset karne ke liye */
}

/* TITLE */
#before-after-section .ba-card h3 {
    padding: 20px 15px;
    margin: 0;
    font-size: 18px !important;
    color: #0a2540 !important;
    font-weight: 700;
}

/*Responsive*/
/* =========================
   TABLET (<= 991px)
========================= */
@media (max-width: 991px){

    #before-after-section {
        padding: 60px 20px;
    }

    #before-after-section .ba-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .ba-img img {
        height: 200px;
    }

    #before-after-section .ba-card h3 {
        font-size: 16px !important;
        padding: 18px 12px;
    }
}

/* =========================
   MOBILE (<= 576px)
========================= */
@media (max-width: 576px){

    #before-after-section {
        padding: 40px 15px;
    }

    #before-after-section .ba-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* 🔥 Important: images ko thoda compact aur clean banaya */
    .ba-img img {
        height: 160px;
    }

    /* Labels thode chhote */
    #before-after-section .label {
        font-size: 10px;
        padding: 5px 12px;
    }

    /* Title mobile pe balanced */
    #before-after-section .ba-card h3 {
        font-size: 15px !important;
        padding: 15px 10px;
    }

    /* Card spacing improve */
    #before-after-section .ba-card {
        border-radius: 16px;
    }
}

/* =========================
   SMALL MOBILE (<= 400px)
========================= */
@media (max-width: 400px){

    .ba-img img {
        height: 140px;
    }

    #before-after-section .label {
        font-size: 9px;
        padding: 4px 10px;
    }
}

/*Single Project Page*/

/* OUTER CONTAINER SPACING */
#webnotick-project-details-page .project-container {
    max-width: 1200px;
    margin: 80px auto; /* top-bottom spacing */
    padding: 0 20px; /* left-right spacing */
}

/* ===== LAYOUT ===== */
#webnotick-project-details-page .project-wrapper {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

#webnotick-project-details-page .project-main-content {
    flex: 2;
    margin-top: 0 !important;
}

/* RIGHT SIDE FIX */
#webnotick-project-details-page .project-sidebar {
    flex: 1;
    margin-top: 0 !important;
}

/* ===== PROJECT OVERVIEW TITLE ===== */
#webnotick-project-details-page .project-content h2 {
    font-size: 30px;
    font-weight: 800;
    color: #0A2540;
    margin-bottom: 15px;
    margin-top: 10px;
    position: relative;
}

/* ===== PARAGRAPHS ===== */
#webnotick-project-details-page .project-content p {
    font-size: 18px;
    color: #555;
    line-height: 1.9;
    margin-bottom: 20px; /* gap between paragraphs */
}

/* ===== SIDEBAR BOX ===== */
#webnotick-project-details-page .project-details-box {
    background: #FFF4E3;
    padding: 30px;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* ===== SIDEBAR TITLE ===== */
#webnotick-project-details-page .sidebar-title {
    font-size: 24px;
    font-weight: 800;
    color: #0A2540;
    margin-bottom: 25px;
}

/* ===== DETAILS LIST ===== */
#webnotick-project-details-page .details-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#webnotick-project-details-page .details-list li {
    display: flex;
    align-items: flex-start; /* IMPORTANT FIX */
    gap: 15px;
    margin-bottom: 22px;
}

/* ICON BOX */
#webnotick-project-details-page .details-list .icon-box {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 3px;
}

#webnotick-project-details-page .details-list .icon-box i , #webnotick-project-details-page .details-list .icon-box svg {
    color: #ff5500 !important;
    font-size: 20px !important;
}

/* TEXT BLOCK */
#webnotick-project-details-page .details-list .text {
    display: flex;
    flex-direction: column; /* label + value vertical */
}

#webnotick-project-details-page .details-list strong {
    font-size: 15px;
    font-weight: 700;
    color: #0A2540;
    margin-bottom: 3px;
}

#webnotick-project-details-page .details-list span {
    font-size: 14px;
    color: #6b7280;
}

/* ===== DIVIDER LINE ===== */
#webnotick-project-details-page .sidebar-divider {
    border: none;
    height: 2px;
    background: #f3c78b; /* dark yellow line */
    margin: 25px 0;
}

/* ===== SERVICES INCLUDED ===== */
#webnotick-project-details-page .services-included-section h4 {
    font-size: 18px;
    font-weight: 700;
    color: #0A2540;
    margin-bottom: 15px;
}

/* LIST */
#webnotick-project-details-page .services-check-list-new {
    list-style: none;
    padding: 0;
    margin: 0;
}

#webnotick-project-details-page .services-check-list-new li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 15px;
    color: #4b5563;
}

/* CHECK ICON */
#webnotick-project-details-page .services-check-list-new li i, #webnotick-project-details-page .services-check-list-new li svg {
    color: #4b5563 !important;
    font-size: 14px !important;
}

/* ===== REMOVE DUPLICATE TITLE ABOVE IMAGE ===== */
#webnotick-project-details-page .entry-header {
    display: none !important;
}
header .page-title {
    display: none !important;
}

/* ===== IMAGE ===== */
/* FORCE IMAGE FIX (FINAL OVERRIDE) */
#webnotick-project-details-page .project-featured-image img,
#webnotick-project-details-page .project-featured-image img.wp-post-image,
#webnotick-project-details-page .project-main-content img {
    width: 100% !important;
    height: 550px !important; /* increase height */
    object-fit: cover !important;
    border-radius: 30px !important;
    display: block !important;
}
#webnotick-project-details-page img.attachment-full {
    height: 550px !important;
}
#webnotick-project-details-page .project-content h2:first-child {
    display: none;
}

/* IMAGE FIX */
#webnotick-project-details-page .project-featured-image {
    margin-top: 0 !important;
}

/*Project Second Section */

/* Gallery Section spacing */
#webnotick-project-details-page .project-gallery-wrapper {
    padding: 80px 20px; /* 80px top aur bottom ke liye, 0 left aur right ke liye */
}

#webnotick-project-details-page .gallery-main-heading {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 30px;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 10px; /* "Project" aur "Gallery" ke beech ka gap */
    flex-direction: row !important;   /* column ko override */
    flex-wrap: nowrap;                /* line break rokne ke liye */
}

/* Variable 1: Project (Dark Blue) */
#webnotick-project-details-page .gallery-main-heading .dark-text {
    color: #002745;
}

/* Variable 2: Gallery (Light Blue/Cyan) */
#webnotick-project-details-page .gallery-main-heading .accent-color {
    color: #1080A6;
}

/* Active Dot Styling (Orange & Long) */
/* Gallery Slider Box Structure */
#webnotick-project-details-page .gallery-slider-box {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden; /* Faltu images hide karne ke liye */
    border-radius: 20px;
}

#webnotick-project-details-page .gallery-slider-inner {
    display: flex; /* Images ko ek line mein lane ke liye */
    transition: transform 0.5s ease-in-out; /* Smooth slide effect */
}

#webnotick-project-details-page .gallery-slide {
    min-width: 100%; /* Ek baar mein ek hi image dikhegi */
}

#webnotick-project-details-page .gallery-slide img {
    width: 100%;
    height: 500px; /* Aap apne hisaab se adjust karein */
    object-fit: cover;
    display: block;
}

/* Navigation Buttons (Circle Arrows) */
#webnotick-project-details-page .slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    color: #002745;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: 0.3s;
}

#webnotick-project-details-page .slider-nav:hover {
    background: #FF6000;
    color: #fff;
}

#webnotick-project-details-page .prev-btn { left: 20px; }
#webnotick-project-details-page .next-btn { right: 20px; }

/* Dots Styling */
#webnotick-project-details-page .gallery-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

#webnotick-project-details-page .dot {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Active Dot: Orange and Long */
#webnotick-project-details-page .dot.active {
    background: #FF6000;
    width: 30px; /* Lamba shape */
    border-radius: 10px;
}
/*Problem & Solution section*/

#webnotick-project-details-page .project-problem-solution-section {
    padding: 80px 0;
}
#webnotick-project-details-page .prob-sol-wrapper {
    display: flex;
    gap: 25px;
}
#webnotick-project-details-page .prob-sol-box {
    flex: 1;
    padding: 35px;
    border-radius: 15px;
}
#webnotick-project-details-page .problem-box {
    background: #FFF0F0;
    border-left: 6px solid #FF3B3B;
}
#webnotick-project-details-page .solution-box {
    background: #E8FBF0;
    border-left: 6px solid #28A745;
}
#webnotick-project-details-page .prob-sol-box h3 {
    font-size: 26px;
    margin-bottom: 15px;
    color: #002745;
    font-weight: 700;
}

#webnotick-project-details-page .prob-sol-box p{
    color: #444;
    font-size: 16px;
}

#webnotick-project-details-page .prob-sol-box ul {
    margin-top: 15px;
    list-style: none;
    padding-left: 0;
}
#webnotick-project-details-page .dynamic-icon-list {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}
#webnotick-project-details-page .dynamic-icon-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 16px;
    color: #444;
}
#webnotick-project-details-page .problem-box .dynamic-icon-list i, #webnotick-project-details-page .problem-box .dynamic-icon-list svg {
    color: #002745; /* Problem Icon Color */
    margin-top: 10px;
    font-size: 4px;
}
#webnotick-project-details-page .solution-box .dynamic-icon-list i,#webnotick-project-details-page .solution-box .dynamic-icon-list svg {
    color: #002745; /* Solution Icon Color */
    margin-top: 10px;
    font-size: 4px;
}

/*project 3rd Section (Before & After)*/
#webnotick-project-details-page .ba-main-wrapper-div {
    background-color: #0c1829;
    padding: 70px 20px;
    text-align: center;
}
#webnotick-project-details-page .ba-header h2 { 
    font-size: 38px; 
    font-weight: 800; 
    margin-bottom: 35px; 
}
#webnotick-project-details-page .white-txt { color: #fff; }
#webnotick-project-details-page .orange-txt { color: #ff6a00; }

#webnotick-project-details-page .ba-slider-box {
    position: relative;
    width: 95%;
    max-width: 1000px;
    height: 520px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

#webnotick-project-details-page .ba-img-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
}

#webnotick-project-details-page .before-view {
    width: 50%;
    border-right: 4px solid #fff;
    z-index: 2;
}

#webnotick-project-details-page .ba-tag {
    position: absolute;
    top: 25px;
    padding: 12px 28px;
    border-radius: 30px;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
}
#webnotick-project-details-page .before-tag { 
    left: 25px; 
    background: #eb2127; 
}
#webnotick-project-details-page .after-tag { 
    right: 25px; 
    background: #00b633; 
}

#webnotick-project-details-page .ba-range-input {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    cursor: ew-resize;
    z-index: 10;
}

#webnotick-project-details-page .ba-drag-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
}

#webnotick-project-details-page .handle-icon-box {
    width: 60px;
    height: 60px;
    background: #ff6a00;
    border: 5px solid #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #fff;
}
/*Single Project 4th section (Testimonials)*/
/* TESTIMONIALS SECTION */

/* Container Spacing */
#webnotick-project-details-page .custom-testimonials-section {
    padding: 100px 40px;
    background: #f0faff; /* Light background taaki cards uth kar dikhen */
    overflow: visible !important;
}

/* Base Card Style (Inactive) */
#webnotick-project-details-page .testimonial-card-new {
    background: #ffffff; /* Default white for inactive */
    border-radius: 25px;
    padding: 50px 40px 40px 40px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
    transition: all 0.5s ease;
    transform: scale(0.92); /* Chote cards side wale */
    opacity: 0.6;
    position: relative;
    color: #555;
    height: 100%;
}

/* ACTIVE CARD (Bada aur Blue Gradient) */
#webnotick-project-details-page .swiper-slide-active .testimonial-card-new {
    background: linear-gradient(180deg, #007bff 0%, #00a896 100%);
    transform: scale(1.05); /* Bada size */
    opacity: 1;
    color: #fff;
    z-index: 10;
}

/* QUOTES LOGIC */
/* Inactive cards ke liye (Inside, Blue/Dark) */
#webnotick-project-details-page .testimonial-card-new .quote-icon {
    position: absolute;
    top: 25px;
    left: 25px;
    font-size: 35px;
    color: #0c1829;
    opacity: 0.2;
}

/* Active card ke liye (Yellow Circle Top Right) */
#webnotick-project-details-page .swiper-slide-active .testimonial-card-new .quote-icon {
    top: -25px;
    right: -15px;
    left: auto;
    background: #ffb400;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 1;
    font-size: 24px;
    box-shadow: 0 10px 20px rgba(255, 180, 0, 0.3);
}

/* USER SECTION */
#webnotick-project-details-page .user-box {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

#webnotick-project-details-page .user-img img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.3);
}

#webnotick-project-details-page .testimonial-text h4 {

    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin-top: 15px;
}

/* Active card text color fix */ 
#webnotick-project-details-page .swiper-slide-active .testimonial-text h4 { 
    color: #fff !important; 
    font-size: 22px;
}

/* Active designation thoda bold */
#webnotick-project-details-page .swiper-slide-active .user-info .designation {
    font-size: 17px;
    font-weight: 700;
    color: #fff !important;
}

/* Inactive thoda soft */
#webnotick-project-details-page .user-info .designation {
    opacity: 0.8;
    color: #001f6d !important;
}

/* Active profession stylish */
#webnotick-project-details-page .swiper-slide-active .user-info .user-profession {
    color: #FFE8D6 !important;
    font-weight: 500;
    font-size: 14px !important;
}

/* Inactive thoda dull */
#webnotick-project-details-page .user-info .user-profession {
    color: #999 !important;
}

#webnotick-project-details-page .user-info {
    display: flex;
    flex-direction: column; /* ye line sabse important */
    align-items: flex-start;
}

#webnotick-project-details-page .user-info .designation,
#webnotick-project-details-page .user-info .user-profession {
    display: block;
    line-height: 1.4;
}

/* CONTROLS (Arrows & Dots) */
#webnotick-project-details-page .custom-testimonial-controls-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 60px;
}

#webnotick-project-details-page .custom-prev, .custom-next {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #007bff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: 0.3s;
}

#webnotick-project-details-page .custom-prev:hover, .custom-next:hover {
    background: #007bff;
    color: #fff;
}

/* Pagination Dots */
#webnotick-project-details-page .custom-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto !important;
}

#webnotick-project-details-page .custom-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #ccc;
    opacity: 1;
}

#webnotick-project-details-page .custom-pagination .swiper-pagination-bullet-active {
    width: 30px;
    border-radius: 20px;
    background: #007bff;
}

/*Project section 5 (Related Project)*/
#webnotick-project-details-page .related-projects-section {
    padding: 60px 20px;
    background: #f5f5f5;
}

#webnotick-project-details-page .related-heading {
    text-align: center;
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Dark part */
#webnotick-project-details-page .dark-text {
    color: #0b2c4d; /* dark blue / black */
}

/* Orange part */
#webnotick-project-details-page .accent-text {
    color: #ff6a00; /* theme orange */
    margin-left: 5px;
}

#webnotick-project-details-page .related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

#webnotick-project-details-page .related-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
#webnotick-project-details-page .related-card:hover{
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

#webnotick-project-details-page .img-box {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden; /*  IMPORTANT */
    border-radius: 15px 15px 0 0;
}

#webnotick-project-details-page .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /*  MAIN FIX */
    display: block;
    transition: transform 0.4s ease; /* smooth zoom */
}

/*  Hover pe zoom */
#webnotick-project-details-page  .related-card:hover .img-box img {
    transform: scale(1.1);
}

#webnotick-project-details-page .badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    color:#0c2e60;
}

#webnotick-project-details-page .card-content {
    padding: 20px;
    text-align: center;
}

#webnotick-project-details-page .card-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: #0c2e60;
    text-align: left;
}
/* Hover pe orange color */
#webnotick-project-details-page .related-card:hover .card-content h3 {
    color: #ff6a00; /* apna theme orange */
}

/* FIX: flicker remove */
#webnotick-project-details-page .swiper-slide {
    transition: transform 0.5s ease, opacity 0.5s ease;
    backface-visibility: hidden;
    transform: translateZ(0); /* GPU fix */
}

/* FIX: ensure visible during loop */
#webnotick-project-details-page .swiper-wrapper {
    align-items: stretch;
}

/*Project Last Section (Result)*/
#webnotick-project-details-page .project-cta-wrapper {
    background-color: #FF5500; /* Screenshot wala exact orange */
    padding: 70px 20px;
    text-align: center;
    width: 100%;
}

#webnotick-project-details-page .cta-heading {
    color: #ffffff;
    font-size: 45px;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.2;
}

#webnotick-project-details-page .highlight-blue {
    color: #55E5FB; /* Screenshot wala blue color */
}

#webnotick-project-details-page .cta-subtext {
    color: #ffffff;
    font-size: 19px;
    margin-bottom: 35px;
    font-weight: 400;
    opacity: 0.9;
}

#webnotick-project-details-page .cta-view-btn {
    background-color: #ffffff;
    color: #FF5500;
    /* Padding aur Font size ko bada kiya gaya hai */
    padding: 20px 55px; 
    font-size: 18px;
    
    border-radius: 100px; /* Fully pill-shaped */
    font-weight: 800;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Smooth bouncy effect */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
}

/* Hover Effect: Button thoda aur bada hoga */
#webnotick-project-details-page .cta-view-btn:hover {
    background-color: #ffffff;
    transform: scale(1.08); /* 8% bada dikhega hover par */
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2); /* Deep shadow for depth */
    color: #FF4400;
}

/* ===============================
   RESPONSIVE START
================================= */

/* ====== TABLET (1024px) ====== */
@media (max-width: 1024px) {

    /* MAIN LAYOUT STACK */
    #webnotick-project-details-page .project-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    #webnotick-project-details-page .project-main-content,
    #webnotick-project-details-page .project-sidebar {
        width: 100%;
    }

    /* IMAGE HEIGHT FIX */
    #webnotick-project-details-page .project-main-content img {
        height: 420px !important;
    }

    /* GALLERY */
    #webnotick-project-details-page .gallery-slide img {
        height: 380px;
    }

    /* PROBLEM SOLUTION STACK */
    #webnotick-project-details-page .prob-sol-wrapper {
        flex-direction: column;
    }

    /* BEFORE AFTER */
    #webnotick-project-details-page .ba-slider-box {
        height: 420px;
    }

    /* RELATED GRID */
    #webnotick-project-details-page .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* CTA */
    #webnotick-project-details-page .cta-heading {
        font-size: 36px;
    }
}


/* ====== MOBILE LARGE (768px) ====== */
@media (max-width: 768px) {

    /* CONTAINER SPACING */
    #webnotick-project-details-page .project-container {
        margin: 50px auto;
    }

    /* TITLE */
    #webnotick-project-details-page .project-content h2 {
        font-size: 24px;
    }

    /* TEXT */
    #webnotick-project-details-page .project-content p {
        font-size: 16px;
    }

    /* SIDEBAR */
    #webnotick-project-details-page .project-details-box {
        padding: 25px;
    }

    /* IMAGE */
    #webnotick-project-details-page .project-main-content img {
        height: 300px !important;
        border-radius: 20px !important;
    }

    /* GALLERY */
    #webnotick-project-details-page .gallery-main-heading {
        font-size: 26px;
        flex-direction: column;
        gap: 5px;
    }

    #webnotick-project-details-page .gallery-slide img {
        height: 280px;
    }

    /* NAV BUTTON SMALL */
    #webnotick-project-details-page .slider-nav {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    /* PROBLEM SOLUTION */
    #webnotick-project-details-page .prob-sol-box {
        padding: 25px;
    }

    #webnotick-project-details-page .prob-sol-box h3 {
        font-size: 22px;
    }

    /* BEFORE AFTER */
    #webnotick-project-details-page .ba-slider-box {
        height: 300px;
    }

    #webnotick-project-details-page .ba-header h2 {
        font-size: 28px;
    }

    /* TESTIMONIAL */
    #webnotick-project-details-page .testimonial-card-new {
        padding: 30px 20px;
    }

    /* RELATED */
    #webnotick-project-details-page .related-grid {
        grid-template-columns: 1fr;
    }

    /* CTA */
    #webnotick-project-details-page .cta-heading {
        font-size: 28px;
    }

    #webnotick-project-details-page .cta-subtext {
        font-size: 16px;
    }

    #webnotick-project-details-page .cta-view-btn {
        padding: 12px 28px !important;  /* pehle 20px 55px tha */
        font-size: 15px !important;
        width: auto !important; /* full width hata diya */
    }
}


/* ====== SMALL MOBILE (480px) ====== */
@media (max-width: 480px) {

    /* TEXT */
    #webnotick-project-details-page .project-content h2 {
        font-size: 20px;
    }

    #webnotick-project-details-page .project-content p {
        font-size: 15px;
    }

    /* IMAGE */
    #webnotick-project-details-page .project-main-content img {
        height: 220px !important;
    }

    /* SIDEBAR TEXT */
    #webnotick-project-details-page .details-list strong {
        font-size: 14px;
    }

    #webnotick-project-details-page .details-list span {
        font-size: 13px;
    }

    /* GALLERY */
    #webnotick-project-details-page .gallery-slide img {
        height: 220px;
    }

    /* BEFORE AFTER */
    #webnotick-project-details-page .ba-slider-box {
        height: 250px;
    }

    /* HANDLE SIZE */
    #webnotick-project-details-page .handle-icon-box {
        width: 45px;
        height: 45px;
    }

    /* CTA */
    #webnotick-project-details-page .cta-heading {
        font-size: 22px;
    }

    #webnotick-project-details-page .cta-view-btn {
        padding: 10px 22px !important;
        font-size: 14px !important;
    }
}
/* ===============================
   MOBILE CLEAN SWAP FIX (FINAL)
================================= */

@media (max-width: 1023px) {

    /* 1. Swiper container clean rakho */
   #webnotick-project-details-page .customTestimonialSwiper {
        /*overflow: hidden !important;*/
        padding-top: 40px !important; /* 🔥 IMPORTANT */
    }

    /* 2. Sab slides default hidden */
    #webnotick-project-details-page .customTestimonialSwiper .swiper-slide {
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease !important;
    }

    /* 3. Sirf active slide dikhe */
    #webnotick-project-details-page .customTestimonialSwiper .swiper-slide-active {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* 4. IMPORTANT: side cards remove completely */
    #webnotick-project-details-page .customTestimonialSwiper .swiper-slide:not(.swiper-slide-active) .testimonial-card-new {
        display: none !important;
    }

    /* 5. Active card always visible */
    #webnotick-project-details-page .customTestimonialSwiper .swiper-slide-active .testimonial-card-new {
        display: block !important;
    }

}
/*Single Services Page (Section-1)*/

#webnotick-single-service .service-section1{
    padding: 80px 40px;
}

#webnotick-single-service .service-image-wrapper {
    position: relative;
}

#webnotick-single-service .service-image-wrapper img {
    width: 100%;
    border-radius: 20px;
    height: 450px;
    object-fit: cover;
}

/* TOP LEFT CIRCLE */
#webnotick-single-service .service-image-wrapper::before {
    content: "";
    position: absolute;
    top: -30px;
    left: -30px;
    width: 120px;
    height: 120px;
    background: #ffe8d6;
    border-radius: 50%;
    z-index: -1;
}

/* BOTTOM RIGHT BOX */
#webnotick-single-service .service-image-wrapper::after {
    content: "";
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: #dff6ff;
    border-radius: 20px;
    z-index: -1;
}

/* TAG */
#webnotick-single-service .service-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff3e8;
    padding: 8px 15px;
    border-radius: 50px;
    font-size: 14px;
    margin-bottom: 15px;
}

#webnotick-single-service .service-tag span{
    color: #f54a00;
    font-size: 14px;
    font-weight: 700;
}

#webnotick-single-service .service-tag i, #webnotick-single-service .service-tag svg {
    color: #ff6900;
    font-size: 14px;
}

/* TITLE */
#webnotick-single-service .service-title {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #0a2540;
}

/* TEXT */
#webnotick-single-service .service-description p {
    color: #555;
    margin-bottom: 15px;
}

/* BUTTONS */
#webnotick-single-service .service-buttons {
    margin-top: 20px;
    display: flex;
    gap: 15px;
}

/* PRIMARY BUTTON */
#webnotick-single-service .btn-primary {
    background: #ff6600;
    color: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

#webnotick-single-service .btn-primary i, #webnotick-single-service .btn-primary svg {
    margin-right: 8px;
    font-size: 14px;
}

/* optional hover animation 🔥 */
#webnotick-single-service .btn-primary:hover i , #webnotick-single-service .btn-primary:hover svg {
    transform: translateX(3px);
    transition: 0.3s ease;
}

/* OUTLINE BUTTON */
#webnotick-single-service .btn-outline {
    border: 2px solid #0d1b2a;
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* HOVER EFFECT */
#webnotick-single-service .btn-primary:hover,
#webnotick-single-service .btn-outline:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
/*Single service (Section 2)*/
#webnotick-single-service .what-we-clean-section {
    padding: 80px 40px;
    text-align: center;
}

/* TITLE */
#webnotick-single-service .clean-header h2 {
    font-size: 40px;
    font-weight: 700;
}

#webnotick-single-service .clean-header .dark {
    color: #0a2540;
}

#webnotick-single-service .clean-header .orange {
    color: #ff6600;
}

#webnotick-single-service .clean-header p {
    margin-top: 10px;
    color: #666;
}

/* GRID */
#webnotick-single-service .clean-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 50px;
}

/* CARD BASE */
#webnotick-single-service .clean-card {
    /*background: #F0FAFD;*/
    padding: 30px;
    border-radius: 20px;
    text-align: left;

    /* NORMAL SHADOW */
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);

    transition: all 0.3s ease !important;
    border: 1px solid transparent !important;
}

/* ICON BOX */
#webnotick-single-service .icon-box {
    width: 60px;
    height: 60px;
    background: #ff6600;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;

    transition: all 0.3s ease;
}

/* HOVER EFFECT  */
#webnotick-single-service .clean-card:hover {
    transform: translateY(-5px);
    border: 1px solid #ff6600 !important;
    background-color: #fff;

    /* STRONG SHADOW */
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* ICON HOVER SCALE */
#webnotick-single-service .clean-card:hover .icon-box {
    transform: scale(1.1);
}

#webnotick-single-service .icon-box i, #webnotick-single-service .icon-box svg {
    color: #fff !important;
    font-size: 24px;
}

/* TEXT */
#webnotick-single-service .clean-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #0a2540;
    font-weight: 700;
}

#webnotick-single-service .clean-card p {
    color: #666;
    font-size:16;
}
/* Single Services (Section 3)*/
#webnotick-single-service .why-choose-section{
    padding: 80px 40px;
    text-align: center;
    background:#eef7fb;
}

#webnotick-single-service .why-header h2{
    font-size: 36px;
    font-weight: 700;
}

#webnotick-single-service .why-header .dark{
    color: #0a2540;
}

#webnotick-single-service .why-header .blue{
    color: #00a8cc;
}

#webnotick-single-service .why-header p{
    margin-top: 10px;
    color: #555;
}

#webnotick-single-service .why-cards{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 25px;
    margin-top: 40px;
}

#webnotick-single-service .why-card{
    background: #fff;
    padding: 30px 20px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: 0.3s;
}

#webnotick-single-service .why-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

#webnotick-single-service .why-card .icon-box{
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: #00a8cc;
    border-radius: 15px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:20px;
}

#webnotick-single-service .why-card h3{
    font-size: 20px;
    margin-bottom: 10px;
    color: #0a2540;
    font-weight: 700;
}

#webnotick-single-service .why-card p{
    margin-top: 10px;
    color: #555;
}
/* Single services(Section-4)*/
#webnotick-single-service .booking-section{
    padding:80px 20px;
    background-color: #FFF6F0;
}

#webnotick-single-service .booking-wrapper{
    max-width:900px;
    margin:0 auto;
    background:#fff;
    padding:50px;
    border-radius:20px;
    border:3px solid #ff6600;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

/* HEADER */
#webnotick-single-service .booking-header{
    text-align:center;
    margin-bottom:30px;
}

#webnotick-single-service .booking-header h2{
    font-size:32px;
    font-weight:700;
}

#webnotick-single-service .booking-header .dark{
    color:#0b2c4d;
}

#webnotick-single-service .booking-header .orange{
    color:#ff6600;
}

#webnotick-single-service .booking-header p{
    color:#666;
    margin-top:10px;
}

/* FORM */
#webnotick-single-service .webnotick-booking-form{
    width:100%;
}

#webnotick-single-service .form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

#webnotick-single-service .form-group{
    margin-bottom:20px;
}

#webnotick-single-service .form-group.full{
    width:100%;
}

#webnotick-single-service .form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:#0b2c4d;
}

/* INPUTS */
#webnotick-single-service input,
#webnotick-single-service select,
#webnotick-single-service textarea{
    width:100%;
    padding:14px;
    border-radius:12px;
    border:2px solid #ddd;
    font-size:14px;
    outline:none;
    transition:0.3s;
}

#webnotick-single-service input:focus,
#webnotick-single-service select:focus,
#webnotick-single-service textarea:focus{
    border-color:#ff6600;
}

/* TEXTAREA */
#webnotick-single-service textarea{
    height:120px;
    resize:none;
}

/* BUTTON */
#webnotick-single-service .form-submit{
    text-align:center;
    margin-top:20px;
}

#webnotick-single-service input[type="submit"]{
    background:#ff6600;
    color:#fff;
    padding:16px 40px;
    border:none;
    border-radius:50px;
    font-weight:600;
    cursor:pointer;
    transition: all 0.3s ease;
}

/* HOVER EFFECT 🔥 */
#webnotick-single-service input[type="submit"]:hover{
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(255, 102, 0, 0.4);
    background:#e65c00;
    text-decoration: none;
}
/* ===============================
   RESPONSIVE - TABLET (992px)
================================ */
@media (max-width: 992px){

    /* SECTION 1 */
    #webnotick-single-service .service-section1{
        padding: 60px 20px;
    }

    #webnotick-single-service .service-title{
        font-size: 30px;
    }

    #webnotick-single-service .service-image-wrapper img{
        height: 350px;
    }

    /* SECTION 2 */
    #webnotick-single-service .clean-cards{
        grid-template-columns: repeat(2, 1fr);
    }

    /* SECTION 3 */
    #webnotick-single-service .why-cards{
        grid-template-columns: repeat(2, 1fr);
    }

    /* SECTION 4 */
    #webnotick-single-service .booking-wrapper{
        padding: 35px;
    }
}


/* ===============================
   RESPONSIVE - MOBILE (768px)
================================ */
@media (max-width: 768px){

    /* GRID FIX (image + content stack) */
    #webnotick-single-service .grid{
        grid-template-columns: 1fr !important;
    }

    /* SECTION 1 */
    #webnotick-single-service .service-title{
        font-size: 26px;
    }

    #webnotick-single-service .service-image-wrapper img{
        height: 280px;
    }

    #webnotick-single-service .service-buttons{
    flex-direction: row;   /* column hatao */
    flex-wrap: wrap;
}

    /* SECTION 2 */
    #webnotick-single-service .what-we-clean-section{
        padding: 60px 20px;
    }

    #webnotick-single-service .clean-header h2{
        font-size: 28px;
    }

    #webnotick-single-service .clean-cards{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* SECTION 3 */
    #webnotick-single-service .why-choose-section{
        padding: 60px 20px;
    }

    #webnotick-single-service .why-header h2{
        font-size: 26px;
    }

    #webnotick-single-service .why-cards{
        grid-template-columns: 1fr;
    }

    /* SECTION 4 */
    #webnotick-single-service .booking-wrapper{
        padding: 25px;
    }

    #webnotick-single-service .form-row{
        grid-template-columns: 1fr;
    }

    #webnotick-single-service input[type="submit"]{
        width: 100%;
    }
}


/* ===============================
   SMALL MOBILE (480px)
================================ */
@media (max-width: 480px){

    #webnotick-single-service .service-title{
        font-size: 22px;
    }

    #webnotick-single-service .clean-header h2,
    #webnotick-single-service .why-header h2{
        font-size: 22px;
    }

    #webnotick-single-service .booking-header h2{
        font-size: 22px;
    }

    #webnotick-single-service .service-image-wrapper img{
        height: 220px;
    }

    #webnotick-single-service .btn-primary,
    #webnotick-single-service .btn-outline{
    width: auto;
    display: inline-flex;
}
}
/* Blog Grid*/

#main.blog-grid,
#secondary.blog-grid {
    padding: 80px 40px;
    background: #f8f9fb;
}

/* GRID */
#main .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px !important;
}

/* CARD */
#main .blog-card ,
#secondary .blog-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: 0.3s;
}

#main .blog-card:hover ,
#secondary .blog-card:hover {
    transform: translateY(-5px);
}

/* IMAGE */
#main .blog-image img ,
#secondary .blog-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

/* CONTENT */
#main .blog-content ,
#secondary .blog-content {
    padding: 20px;
}

/* CATEGORY */
#main .blog-category ,
#secondary .blog-category {
    display: inline-block;
    background: #ffe8d9;
    color: #ff6a00;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    margin-bottom: 10px;
    font-weight: 700;
}

/* TITLE */
#main .blog-title ,
#secondary .blog-title {
    font-size: 20px;
    font-weight: 600;
    margin: 10px 0;
    text-decoration: none;
    color: #0b1c39;
    font-weight: 700;
}

/* DESC */
#main .blog-desc ,
#secondary .blog-desc {
    color: #666;
    font-size: 14px;
    margin-bottom: 15px;
}

/* META */
#main .blog-meta ,
#secondary .blog-meta {
    display: flex;
    gap: 15px;
    font-size: 13px;
    color: #777;
    margin-bottom: 15px;
}

/*Author*/
#main .blog-meta .author ,
#secondary .blog-meta .author {
    font-size: 13px;
    color: #777;
}

/*Date*/
#main .blog-meta .date ,
#secondary .blog-meta .date {
    font-size: 13px;
    color: #777;
}

/*Author & Calender Icon*/
#main .blog-meta i, #main .blog-meta svg ,
#secondary .blog-meta i, #secondary .blog-meta svg {
    color: #666 !important;
    margin-right: 8px;
}

/* BUTTON */
#main .blog-btn ,
#secondary .blog-btn {
    color: #ff6a00;
    font-weight: 600;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ICON */
#main .blog-btn i,
#secondary .blog-btn i,
#main .blog-btn svg ,
#secondary .blog-btn svg {
    color: #ff6a00;
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.3s ease;
}

/* HOVER EFFECT */
#main .blog-btn:hover i,
#main .blog-btn:hover svg,
#secondary .blog-btn:hover i,
#secondary .blog-btn:hover svg{
    transform: translateX(6px);
}

/* SMOOTH TRANSITIONS */
#main .blog-card,
#main .blog-image img,
#main .blog-title a ,
#secondary .blog-card,
#secondary .blog-image img,
#secondary .blog-title a{
    transition: all 0.4s ease;
}

/* HOVER: CARD SHADOW + LIFT */
#main .blog-card:hover,
#secondary .blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

/* IMPORTANT: IMAGE OVERFLOW FIX */
#main .blog-image,
#secondary .blog-image {
    overflow: hidden;
}

/* HOVER: IMAGE ZOOM */
#main .blog-card:hover .blog-image img,
#secondary .blog-card:hover .blog-image img {
    transform: scale(1.1);
}

/* HOVER: TITLE COLOR CHANGE */
#main .blog-card:hover .blog-title,
#secondary .blog-card:hover .blog-title {
    color: #ff6a00;
}
/* =========================
   TABLET (992px)
========================= */
@media (max-width: 992px) {

    #main.blog-grid,
    #secondary.blog-grid {
        padding: 60px 25px;
    }

    #main.blog-grid .grid,
    #secondary.blog-grid .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px !important;
    }

    #main .blog-image img,
    #secondary .blog-image img {
        height: 200px;
    }

    #main .blog-title,
    #secondary .blog-title {
        font-size: 18px;
    }

    #main .blog-desc,
    #secondary .blog-desc {
        font-size: 13px;
    }

}

/* =========================
   SMALL TABLET (768px)
========================= */
@media (max-width: 768px) {

    #main.blog-grid,
    #secondary.blog-grid {
        padding: 50px 20px;
    }

    #main.blog-grid .grid,
    #secondary.blog-grid .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px !important;
    }

    #main .blog-content,
    #secondary .blog-content {
        padding: 18px;
    }

    #main .blog-image img,
    #secondary .blog-image img {
        height: 180px;
    }

}

/* =========================
   MOBILE (576px)
========================= */
@media (max-width: 576px) {

    #main.blog-grid,
    #secondary.blog-grid {
        padding: 40px 15px;
    }

    #main.blog-grid .grid,
    #secondary.blog-grid .grid {
        grid-template-columns: 1fr;
        gap: 30px !important;
    }

    #main .blog-card,
    #secondary .blog-card {
        border-radius: 12px;
    }

    #main .blog-image img,
    #secondary .blog-image img {
        height: 170px;
    }

    #main .blog-title,
    #secondary .blog-title {
        font-size: 17px;
    }

    #main .blog-desc,
    #secondary .blog-desc {
        font-size: 13px;
    }

    #main .blog-meta,
    #secondary .blog-meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }

    #main .blog-btn,
    #secondary .blog-btn {
        font-size: 14px;
    }

}

/* =========================
   EXTRA SMALL (400px)
========================= */
@media (max-width: 400px) {

    #main .blog-image img,
    #secondary .blog-image img {
        height: 150px;
    }

    #main .blog-content,
    #secondary .blog-content {
        padding: 15px;
    }

    #main .blog-title,
    #secondary .blog-title {
        font-size: 16px;
    }

}

/* BLOG LIST-1*/
#blog-list1 {
    padding: 80px 40px;
    background: #f8f9fb;
}

/* WRAPPER FIX */
#blog-list1 .blog-list-wrapper {
    max-width: 850px;
    margin: 0 auto;
}

/* CARD */
#blog-list1 .blog-list-card {
    background: #fff;
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: 0.3s;
    width: 100%;
}

/* FLEX */
#blog-list1 .blog-list-inner {
    display: flex;
    gap: 25px;
    align-items: flex-start;
}

/* IMAGE */

#blog-list1 .blog-list-image {
    overflow: hidden;
    border-radius: 12px;  
}

#blog-list1 .blog-list-image img {
    width: 260px;   /*  width increase */
    height: 180px;  /* thoda height bhi adjust */
    object-fit: cover;
}

/* CATEGORY */
#blog-list1 .blog-list-category {
    display: inline-block;
    background: #E1F9FF;
    color: #006F94;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    margin-bottom: 10px;
    font-weight: 700;
}

/* TITLE */
#blog-list1 .blog-list-title {
    font-size: 34px;
    font-weight: 700;
    margin: 10px 0;
    color: #0b1c39;
    text-decoration: none;
}

/* META */
#blog-list1 .blog-list-meta {
    display: flex;
    gap: 15px;
    font-size: 14px;
    color: #777;
    margin-bottom: 10px;
}

/*Author Date Icon*/
#blog-list1 .blog-list-meta i, #blog-list1 .blog-list-meta svg{
    color: #666 !important;
    margin-right: 8px;
}

/* DESC */
#blog-list1 .blog-list-desc {
    font-size: 18px;
    color: #555;
    margin-bottom: 15px;
}

/* BUTTON */
#blog-list1 .blog-list-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ff6a00;
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s;
}

/* BUTTON HOVER */
#blog-list1 .blog-list-btn i, #blog-list1 .blog-list-btn svg {
    transition: 0.3s;
    color: #fff;
}

#blog-list1 .blog-list-btn:hover i, #blog-list1 .blog-list-btn:hover svg {
    transform: translateX(6px);
}

/* HOVER CARD */
#blog-list1 .blog-list-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}
/* SMOOTH TRANSITIONS */
#blog-list1 .blog-list-card,
#blog-list1 .blog-list-image img,
#blog-list1 .blog-list-title a {
    transition: all 0.4s ease;
}

/* IMAGE OVERFLOW FIX */
#blog-list1 .blog-list-image {
    overflow: hidden;
}

/* HOVER: CARD SHADOW + LIFT */
#blog-list1 .blog-list-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}

/* HOVER: IMAGE ZOOM */
#blog-list1 .blog-list-card:hover .blog-list-image img {
    transform: scale(1.1);
}

/* HOVER: TITLE COLOR CHANGE */
#blog-list1 .blog-list-card:hover .blog-list-title {
    color: #ff6a00;
}
/* =========================
   TABLET (991px se neeche)
========================= */
@media (max-width: 991px) {

    #blog-list1 {
        padding: 60px 20px;
    }

    #blog-list1 .blog-list-wrapper {
        max-width: 100%;
    }

    #blog-list1 .blog-list-inner {
        gap: 20px;
    }

    #blog-list1 .blog-list-image img {
        width: 220px;
        height: 160px;
    }

    #blog-list1 .blog-list-title {
        font-size: 26px;
    }

    #blog-list1 .blog-list-desc {
        font-size: 16px;
    }
}


/* =========================
   MOBILE (767px se neeche)
========================= */
@media (max-width: 767px) {

    /* CARD STACK (IMPORTANT) */
    #blog-list1 .blog-list-inner {
        flex-direction: column;   /* 🔥 image upar, content niche */
        align-items: flex-start;
    }

    /* IMAGE FULL WIDTH */
    #blog-list1 .blog-list-image {
        width: 100%;
    }

    #blog-list1 .blog-list-image img {
        width: 100%;
        height: 220px;
    }

    /* TEXT ADJUST */
    #blog-list1 .blog-list-title {
        font-size: 22px;
    }

    #blog-list1 .blog-list-desc {
        font-size: 15px;
    }

    /* META SAME LINE */
    #blog-list1 .blog-list-meta {
        flex-wrap: wrap;
        gap: 20px;
    }

    /* BUTTON */
    #blog-list1 .blog-list-btn {
        padding: 8px 18px;
        font-size: 14px;
    }
}


/* =========================
   SMALL MOBILE (480px se neeche)
========================= */
@media (max-width: 480px) {

    #blog-list1 {
        padding: 50px 15px;
    }

    #blog-list1 .blog-list-card {
        padding: 20px;
    }

    #blog-list1 .blog-list-title {
        font-size: 20px;
    }

    #blog-list1 .blog-list-desc {
        font-size: 14px;
    }

    #blog-list1 .blog-list-image img {
        height: 200px;
    }
}

/*Blog List2*/

#blog-list2{
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    background: #f8f9fb;
}

#blog-list2 .bl2-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

#blog-list2 .bl2-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    max-width: 900px;   /* width control */
    width: 100%;
    margin: 0 auto;     /* center */
}

#blog-list2 .bl2-card-inner {
    display: flex;
    gap: 0;          /* gap remove */
    padding: 0;      /* IMPORTANT */
    width: 100%;
}

#blog-list2 .bl2-content {
    flex: 1;
    padding: 20px;   /* content spacing */
}

/* IMAGE */
#blog-list2 .bl2-image {
    flex-shrink: 0;
    overflow: hidden;
}

#blog-list2 .bl2-image img {
    width: 280px;
    height: 100%;
    object-fit: cover;

    border-radius: 16px 0 0 16px; /* ONLY left side rounded */
}

/* CONTENT */
#blog-list2 .bl2-content {
    flex: 1;
}

/* TOP META */
#blog-list2 .bl2-top-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

/* CATEGORY */
#blog-list2 .bl2-category {
    background: #ffe7d6;
    color: #ff6a00;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

/* TIME */
#blog-list2 .bl2-time {
    font-size: 13px;
    color: #888;
}

#blog-list2 .bl2-time i, #blog-list2 .bl2-time svg{
    color: #777 ;
    margin-right: 6px;
}

/* TITLE */
#blog-list2 .bl2-title {
    font-size: 20px;
    font-weight: 700;
    margin: 10px 0;
    color: #0b1c39;
    text-decoration: none;
}

/* DESC */
#blog-list2 .bl2-desc {
    color: #666;
    font-size: 14px;
    margin-bottom: 12px;
}

/* META */
#blog-list2 .bl2-meta {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: #888;
    margin-bottom: 12px;
}

#blog-list2 .bl2-meta i, #blog-list2 .bl2-meta svg{
    color: #777;
    margin-right: 6px;
}

/* BUTTON */
#blog-list2 .bl2-btn {
    color: #ff6a00;
    font-weight: 600;
    text-decoration: none;
}

#blog-list2 .bl2-btn i,
#blog-list2 .bl2-btn svg {
    margin-left: 6px;
    color: #ff6a00;
    transition: transform 0.3s ease; /* IMPORTANT */
}

#blog-list2 .bl2-btn:hover i,
#blog-list2 .bl2-btn:hover svg {
    transform: translateX(5px); /* right move */
}

#blog-list2 .bl2-card,
#blog-list2 .bl2-image img,
#blog-list2 .bl2-title a {
    transition: all 0.3s ease;
}
/* CARD HOVER */
#blog-list2 .bl2-card:hover {
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

/* IMAGE ZOOM */
#blog-list2 .bl2-card:hover .bl2-image img {
    transform: scale(1.08);
}

/* TITLE COLOR CHANGE */
#blog-list2 .bl2-card:hover .bl2-title {
    color: #ff6a00;
}
/* =========================
   TABLET 
========================= */
@media (max-width: 991px) {

    #blog-list2 {
        padding: 60px 15px;
    }

    #blog-list2 .bl2-card {
        max-width: 100%;
    }

    #blog-list2 .bl2-image img {
        width: 220px;
        height: 100%;
    }

    #blog-list2 .bl2-title {
        font-size: 18px;
    }

}


/* =========================
   MOBILE 
========================= */
@media (max-width: 767px) {

    #blog-list2 .bl2-card-inner {
        flex-direction: column; /* IMAGE TOP */
    }

    #blog-list2 .bl2-image img {
        width: 100%;
        height: 220px;
        border-radius: 16px 16px 0 0; /* TOP rounded */
    }

    #blog-list2 .bl2-content {
        padding: 15px;
    }

    #blog-list2 .bl2-title {
        font-size: 17px;
    }

    #blog-list2 .bl2-desc {
        font-size: 13px;
    }

    #blog-list2 .bl2-meta {
        flex-direction: row;   /* ek line me */
        align-items: center;
        gap: 15px;
        flex-wrap: wrap;       /* chhoti screen me break ho sake */
    }

}


/* =========================
   SMALL MOBILE 
========================= */
@media (max-width: 480px) {

    #blog-list2 {
        padding: 40px 10px;
    }

    #blog-list2 .bl2-card {
        border-radius: 12px;
    }

    #blog-list2 .bl2-image img {
        height: 200px;
    }

    #blog-list2 .bl2-title {
        font-size: 16px;
    }

    #blog-list2 .bl2-desc {
        font-size: 12px;
    }

    #blog-list2 .bl2-category {
        font-size: 11px;
        padding: 3px 10px;
    }

    #blog-list2 .bl2-time {
        font-size: 12px;
    }

    #blog-list2 .bl2-btn {
        font-size: 14px;
    }

}
/*Single Blog*/
/* MAIN LAYOUT */
/* REMOVE OUTER THEME LIMIT */
#single-blog {
    width: 100%;
    overflow-x: hidden;
    padding-top: 20px;
}

#single-blog .single-blog-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

#single-blog .single-blog-sectio1 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px; /* LEFT + SIDEBAR */
    gap: 30px;
}
#single-blog .widget,
#single-blog aside {
    width: 100%;
    overflow: hidden;
}

/*Title*/
#single-blog .entry-title {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #111;
}

/* Author Date Time - Improved */
#single-blog .entry-meta {
    display: flex;
    align-items: center;
    gap: 25px; /* spacing between items */
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

#single-blog .entry-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

#single-blog .entry-meta i, #single-blog .entry-meta svg {
    color: #ff6b35;
    font-size: 14px;
}

/* TAG SECTION */
#single-blog .post-tags {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

/* Tag Icon */
#single-blog .post-tags i, #single-blog .post-tags svg {
    font-size: 16px;
    color: #6a7282;
}

/* Common Badge */
#single-blog .tag-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
}

/* First Badge (Blue Light) */
#single-blog .tag1 {
    background: #d1f5ff;
    color: #0ea5e9;
}

/* Second Badge (Purple Light) */
#single-blog .tag2 {
    background: #E1EFFF;
    color: #0047E0;
}


/* SHARE */
#single-blog .post-share {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

#single-blog .share-text {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #374151;
    font-weight: 500;
}
#single-blog .share-text i, #single-blog .share-text svg{
    font-size: 12px;
    color:#374151
}
#single-blog .share-icons {
    display: flex;
    gap: 10px;
}

#single-blog .share-icons a {
    width: 35px;
    height: 35px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
}

#single-blog .share-icons a:nth-child(1) {
    background: #2563eb;
}

#single-blog .share-icons a:nth-child(2) {
    background: #1da1f2;
}

#single-blog .share-icons a:nth-child(3) {
    background: #0077b5;
}

/* Facebook hover */
#single-blog .share-icons a:nth-child(1):hover {
    background: #1e4ed8;
}

/* Twitter hover */
#single-blog .share-icons a:nth-child(2):hover {
    background: #0084CC;
}

/* LinkedIn hover */
#single-blog .share-icons a:nth-child(3):hover {
    background: #005f8e;
}

/*Featured Image*/
#single-blog .post-thumbnail img {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 25px;
    height: 450px;
    object-fit: cover;
}

/*Paragraph*/
#single-blog .entry-content p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

/*Headings*/
#single-blog .entry-content h2 {
    font-size: 26px !important;
    font-weight: 700;
    margin: 30px 0 10px;
    color: #0a2540 !important;
}

/*Normal Image*/
#single-blog .entry-content .wp-block-image img  {
    width: 100%;
    border-radius: 12px;
    margin: 25px 0;
    height: 400px;
    object-fit: cover;
}

/* Quote (Pro Tip)*/
#single-blog .entry-content blockquote.wp-block-quote.pro-tip {
    background: #eaf6ff ;
    padding: 20px ;
    border-radius: 10px;
    margin: 30px 0;
    color: #333 ;
    border: none;
}

#single-blog .entry-content blockquote.wp-block-quote.pro-tip h3{
    font-size: 20px;
    color: #021338 ;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Remove default quotes */
#single-blog .entry-content blockquote.wp-block-quote.pro-tip::before,
#single-blog .entry-content blockquote.wp-block-quote.pro-tip::after,
#single-blog .entry-content blockquote.wp-block-quote.pro-tip p::before,
#single-blog .entry-content blockquote.wp-block-quote.pro-tip p::after {
    content: none !important;
}

/* Text */
#single-blog .entry-content blockquote.wp-block-quote.pro-tip p em {
    font-style: 14px ;
    color: #444 ;
}

/* Quote (Final Block)*/
#single-blog .entry-content blockquote.wp-block-quote.final-thought {
    background: #fff4e6;
    padding: 20px !important;
    border-radius: 10px;
    margin: 30px 0;
    color: #333;
    border: none;
}

#single-blog .entry-content blockquote.wp-block-quote.final-thought h3{
    font-size: 20px;
    color: #021338 ;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Remove quotes */
#single-blog .entry-content blockquote.wp-block-quote.final-thought::before,
#single-blog .entry-content blockquote.wp-block-quote.final-thought::after,
#single-blog .entry-content blockquote.wp-block-quote.final-thought p::before,
#single-blog .entry-content blockquote.wp-block-quote.final-thought p::after {
    content: none !important;
}

/* Text */
#single-blog .entry-content blockquote.wp-block-quote.final-thought p {
    font-style: 14px;
    color: #555 !important;
}

/* Hide post/page title */
#single-blog .entry-header,
#single-blog .entry-title {
    display: none !important;
}

/* TITLE */
/*#single-blog .widget-title {
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: 700;
    color: #0d2b4d ;
}*/

/* ===== SEARCH BOX ===== */
#single-blog .widget_search {
    border: 2px solid #ff8c42;
    background: #fff3e6;
    border-radius: 18px;
    padding: 25px 20px;
}

/* TITLE */
#single-blog .widget_search .widget-title {
    color: #0d2b4d;
    font-weight: 700;
    margin-bottom: 18px;
    font-size: 18px;
}

/* FORM */
#single-blog .widget_search form {
    position: relative;
}

/* INPUT */
#single-blog .widget_search input[type="search"] {
    width: 100%;
    height: 48px;
    padding: 0 50px 0 18px; /* 🔥 perfect spacing */
    
    border-radius: 12px;
    border: 2px solid #ff8c42;
    background: #fff3e6;
    
    font-size: 14px;
    outline: none;
}

/* PLACEHOLDER */
#single-blog .widget_search input::placeholder {
    color: #6b7280;
}

/* BUTTON */
#single-blog .widget_search button {
    position: absolute;
    right: 28px;
    top: 40%;
    transform: translateY(-50%);
    
    width: 38px;
    height: 38px;
    
    background: #ff4400;
    border: none;
    border-radius: 10px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    cursor: pointer;
    transition: 0.3s;
}

/* ICON */
#single-blog .widget_search button i,
#single-blog .widget_search button svg {
    color: #fff;
    font-size: 14px;
}

/* HOVER */

/* INPUT FOCUS EFFECT 🔥 */
#single-blog .widget_search input:focus {
    border-color: #ff4400;
    box-shadow: 0 0 0 2px rgba(255, 68, 0, 0.1);
}

/* Second Sidebar*/
/* Main Card */
#sb-profile-card .sb-card {
    background: #eaf6fb;
    border: 2px solid #a2f4fd;
    border-radius: 20px;
    padding: 40px 25px;
    text-align: center;
    /*max-width: 320px;*/
    margin: 0 auto;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

/* Image Circle */
#sb-profile-card .sb-img-box {
    width: 110px;
    height: 110px;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 5px solid #fff; /* white border */
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

#sb-profile-card .sb-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Name */
#sb-profile-card .sb-name {
    font-size: 20px;
    font-weight: 700;
    color: #0b2c3d;
    margin-bottom: 5px;
}

/* Role */
#sb-profile-card .sb-role {
    color: #00a7d1;
    font-size: 14px;
    margin-bottom: 15px;
}

/* Description */
#sb-profile-card .sb-desc {
    font-size: 12px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Social Icons Container */
#sb-profile-card .sb-social {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* Circle Icons */
#sb-profile-card .sb-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    text-decoration: none;

    /* 👇 Smooth animation */
    transition: all 0.3s ease;
}

/* Individual Colors */
#sb-profile-card .fb {
    background: #1877f2;
}

#sb-profile-card .tw {
    background: #1da1f2;
}

#sb-profile-card .ln {
    background: #0a66c2;
}

/* 🔥 Hover Effects */
#sb-profile-card .fb:hover {
    background: #0f5dc2; /* darker blue */
    transform: scale(1.15);
}

#sb-profile-card .tw:hover {
    background: #0d8ddb; /* darker twitter */
    transform: scale(1.15);
}

#sb-profile-card .ln:hover {
    background: #084a91; /* darker linkedin */
    transform: scale(1.15);
}

/*Popular post*/
/* ===== Sidebar Container ===== */
#single-blog .widget_recent_entries {
    background: #f3f4f6;
    padding: 25px 20px;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

/* Remove list style */
#single-blog .widget_recent_entries ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ===== Title ===== */
#single-blog .widget_recent_entries .widget-title {
    color: #003366;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

/* Arrow Icon */
#single-blog .widget_recent_entries .widget-title::before {
    content: "\f054"; /* chevron arrow */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #ff6600;
    font-size: 16px;
    margin-right: 10px;
}

/* ===== Each Post ===== */
#single-blog .widget_recent_entries li {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

#single-blog .widget_recent_entries li:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

/* FLEX FIX */
#single-blog .post-item {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* ===== Image ===== */
#single-blog .post-thumb {
    overflow: hidden;
    border-radius: 15px;
    flex-shrink: 0;
}

#single-blog .post-thumb img {
    width: 65px;
    height: 65px;
    object-fit: cover;
    border-radius: 15px;
    transition: transform 0.3s ease;
}

/* ===== Content ===== */
#single-blog .post-content {
    display: flex;
    flex-direction: column;
}

/* Title */
#single-blog .post-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    text-decoration: none;
    margin-bottom: 5px;
    transition: 0.3s;
}

/* Meta */
#single-blog .post-meta-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
}

/* Date */
#single-blog .date {
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 5px;
}

#single-blog .date i, #single-blog .date svg{
    font-size: 11px;
    color: #6b7280;
}


/* Time */
#single-blog .reading-time {
    color: #f54a00;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Icons */
#single-blog .reading-time i, #single-blog .reading-time svg {
    font-size: 11px;
    color: #ff6600;

}

/* ===== HOVER EFFECT 🔥 ===== */
#single-blog .widget_recent_entries li:hover .post-thumb img {
    transform: scale(1.1);
}

#single-blog .widget_recent_entries li:hover .post-title {
    color: #ff6600;
}

/* Optional lift */
#single-blog .widget_recent_entries li:hover {
    transform: translateY(-2px);
    transition: 0.3s;
}
/* CATEGORIES */
/* MAIN CATEGORY BOX */
#single-blog .widget_categories {
    background: #eef7ff;
    border: 1.5px solid #bfe3ff;
    border-radius: 16px;
    padding: 20px;
}

/* CATEGORY TITLE */
/* CATEGORY TITLE WITH ICON */
#single-blog .widget_categories .widget-title{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #0a2540;
    display: flex;
    align-items: center;
}

/* Adding the Icon before Category Title */
#single-blog .widget_categories .widget-title::before {
    content: "\f02b"; /* Tag icon */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome !important;
    font-weight: 900;
    color: #0a8dff;
    margin-right: 12px;
    font-size: 20px;
    display: inline-block;
}

/* CATEGORY LIST ITEM */
#single-blog .widget_categories ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#single-blog .widget_categories li {
    display: flex;
    align-items: center;
    gap: 10px; /* spacing control */
    background: #ffffff;
    padding: 12px 15px;
    border-radius: 12px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* HOVER EFFECT */
#single-blog .widget_categories li:hover {
    background: #007bff;
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.25);
}

/* CATEGORY LINK */
#single-blog .widget_categories li a {
    text-decoration: none;
    color: #0a2540;
    font-weight: 500;
    flex: 1;
}

/* HOVER EFFECT */
#single-blog .widget_categories li:hover a {
    color: #ffffff;
}

/* COUNT BADGE */
#single-blog .widget_categories li .cat-count {
    background: #e6f4ff;
    color: #0a8dff;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 50px;
    min-width: 34px;
    text-align: center;
    display: inline-block;
    margin-left: auto;
}

/* HOVER EFFECT */
#single-blog .widget_categories li:hover .cat-count {
    background-color: #ffffff;
}

/* ARROW */
#single-blog .widget_categories li::after {
    content: "\f061"; /* Font Awesome arrow */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome !important;
    font-weight: 500;
    font-size: 16px;
    color: #94a3b8;
    margin-left: auto;
    transition: 0.3s;
}

/* HOVER ARROW */
#single-blog .widget_categories li:hover::after {
    color: #ffffff;
}

/* NEWSLETTER */
/* MAIN BOX */
#newsletter-widget {
    background: linear-gradient(180deg, #0d2b4d, #0a2540);
    color: #ffffff;
    text-align: center;
    padding: 30px 20px;
    border-radius: 16px;
}

/* ICON BOX */
#newsletter-widget .icon-box {
    width: 60px;
    height: 60px;
    background: #E65100;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    box-shadow: 0 8px 20px rgba(30, 144, 255, 0.3);
}

#newsletter-widget .icon-box i, #newsletter-widget .icon-box svg {
    color: #ffffff;
    font-size: 22px;
}

/* HEADING */
#newsletter-widget h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
}

/* DESCRIPTION */
#newsletter-widget .desc {
    font-size: 13px;
    color: #cfe6ff;
    margin-bottom: 18px;
    line-height: 1.5;
}

/* INPUT */
#newsletter-widget input {
    width: 100%;
    padding: 12px;
    box-sizing: border-box; /* Ye line add karein, isse border andar fit ho jayegi */
    border-radius: 12px;
    border: 2px solid #4A7BA5;
    transition: 0.3s;
    margin-bottom: 12px;
    font-size: 14px;
    outline: none;
    background-color: #1A4B7C;
    color: #fff;
}

#newsletter-widget input:focus {
    border-color: #ff6b00;
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.2);
}

/* BUTTON */
#newsletter-widget button {
    width: 100%;
    background: #E65100;
    color: #ffffff;
    border: none;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

#newsletter-widget button:hover {
    transform: scale(1.05); /* Hover effect */
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3);
    text-decoration: none;
}

/* PRIVACY */
#newsletter-widget .privacy {
    margin-top: 12px;
    font-size: 12px;
    color: #a8c7e6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#newsletter-widget .privacy i, #newsletter-widget .privacy svg {
    font-size: 12px;
    color: #FF5C00;
}

/*Popular Tags*/
/* Widget Container Box */
#single-blog .widget_tag_cloud {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    max-width: 350px; /* Isse box ki width control hogi */
}

/* Widget Title Styling with Icon */
#single-blog .widget_tag_cloud .widget-title {
    color: #003366 !important; /* Dark Blue */
    font-size: 22px !important;
    font-weight: 800 !important;
    margin-bottom: 25px !important;
    display: flex !important;
    align-items: center !important;
}

/* Creating the Orange Tag Icon */
#single-blog .widget_tag_cloud .widget-title::before {
    content: "\f02b"; /* FontAwesome Tag Icon Unicode */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome !important;
    font-weight: 900 !important;
    color: #ff6600 !important; /* Orange Color */
    font-size: 24px !important; /* Icon Size */
    margin-right: 12px !important; /* Space between icon and text */
    display: inline-block !important;
}

/* Tag Cloud Container - Isse tags side-by-side aayenge */
#single-blog .tagcloud {
    display: flex !important;
    flex-wrap: wrap !important; /* Tags ko next line pe lane ke liye */
    gap: 8px !important; /* Tags ke beech ka gap */
    align-items: center;
}

/* Individual Tag Styling */
#single-blog .tagcloud a {
    display: inline-block !important;
    background-color: #fff4e6 !important;
    color: #cc4400 !important;
    border: 1px solid #ffd8b3 !important;
    border-radius: 25px !important;
    padding: 6px 15px !important; /* Padding thodi kam ki hai taki 2-3 fit ho sakein */
    margin: 0 !important; 
    text-decoration: none !important;
    font-size: 13px !important; /* Font size fix kiya hai taki sab ek jaise dikhein */
    font-weight: 600 !important;
    transition: all 0.3s ease;
    white-space: nowrap !important; /* Tag text break nahi hoga */
}

/* Hover Effect */
#single-blog .tagcloud a:hover {
    background-color: #ff6600 !important;
    color: #ffffff !important;
    border-color: #ff6600 !important;
}

/* # Symbol addition */
#single-blog .tagcloud a::before {
    content: "# ";
    font-weight: bold;
}
/* CTA (Help Sidebar)*/
#custom-cleaning-cta {
    background: linear-gradient(135deg, #00d664 0%, #00b45a 100%);
    padding: 40px 30px;
    border-radius: 30px; /* Screenshot jaisa smooth round corner */
    text-align: center;
    color: #ffffff;
    font-family: 'Arial', sans-serif;
    /*max-width: 350px;*/ /* Sidebar ke hisab se width adjust karein */
    margin: 20px auto;
}

#custom-cleaning-cta .icon-wrapper {
    background-color: #ffffff;
    width: 70px;
    height: 70px;
    border-radius: 20px; /* Icon box ka rounding */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px auto;
}

#custom-cleaning-cta .icon-wrapper i, #custom-cleaning-cta .icon-wrapper svg {
    color: #00c853; /* Icon color */
    font-size: 32px;
}

#custom-cleaning-cta h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #ffffff;
}

#custom-cleaning-cta p {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 30px;
    font-weight: 400;
    opacity: 0.9;
    color: #ffffff;
}

#custom-cleaning-cta .cta-btn {
    display: block;
    background-color: #ffffff;
    color: #00b45a;
    text-decoration: none;
    padding: 15px 20px;
    border-radius: 15px;
    font-weight: 700;
    font-size: 18px;
    transition: transform 0.3s ease;
}

#custom-cleaning-cta .cta-btn:hover {
    transform: scale(1.05); /* Hover effect */
    background-color: #f8f8f8;
}

/* Single Blog (Section 2)*/
/* ===== SECTION ===== */
#single-blog .related-posts-section {
    padding: 80px 20px;
    background: #f8fbff;
    margin: 0 auto;
    max-width: 1200px;
}

/* HEADER */
#single-blog .rp-header {
    text-align: center;
    margin-bottom: 50px;
}

#single-blog .rp-small-title {
    color: #ff6600;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}

#single-blog .rp-main-title {
    font-size: 42px;
    font-weight: 700;
    color: #0a2540;
}

/* ===== CARDS ===== */
#single-blog .rp-cards {
    display: flex;
    gap: 25px;
    justify-content: center;
}

/* ===== CARD ===== */
#single-blog .rp-card {
    width: 32%;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

/* HOVER CARD LIFT */
#single-blog .rp-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* ===== IMAGE ===== */
#single-blog .rp-image {
    position: relative;
    overflow: hidden;
}

/* IMAGE SIZE (HEIGHT INCREASED 🔥) */
#single-blog .rp-image img {
    width: 100%;
    height: 230px; /* 🔥 increased height */
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* 🔵 BLUE OVERLAY */
#single-blog .rp-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 102, 255, 0.15); /* light blue */
    pointer-events: none;
}

/* IMAGE ZOOM */
#single-blog .rp-card:hover .rp-image img {
    transform: scale(1.08);
}

/* ===== CATEGORY ===== */
#single-blog .rp-category {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #fff;
    color: #0d2b4d;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 700;
    z-index: 2;
}

/* ===== CONTENT ===== */
#single-blog .rp-content {
    padding: 22px;
}

/* TITLE */
#single-blog .rp-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #0a2540;
    transition: 0.3s;
}

/* 🔥 TITLE HOVER COLOR */
#single-blog .rp-card:hover .rp-title {
    color: #2563eb; /* blue */
}

/* DATE */
#single-blog .rp-date {
    font-size: 13px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

#single-blog .rp-date i,#single-blog .rp-date svg {
    font-size: 13px;
    color: #6b7280;
}
/* =========================
   RESPONSIVE DESIGNSingle-blog (Section 1)
========================= */

/* ============================= */
/*  MOBILE (0px – 767px) */
/* ============================= */
@media (max-width: 767px) {

    /* GRID → SINGLE COLUMN */
    #single-blog .single-blog-sectio1 {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    /* SIDEBAR FULL WIDTH */
    #single-blog .sb-right {
        max-width: 100%;
    }

    /* TITLE */
    #single-blog .entry-title {
        font-size: 24px;
    }

     /* META (Author / Date / Time) */
    #single-blog .entry-meta {
        flex-wrap: wrap;
        gap: 10px 15px; /* row + column gap */
        font-size: 13px;
    }

    /* TAGS */
    #single-blog .post-tags {
        flex-wrap: wrap;
        gap: 8px;
    }

    #single-blog .tag-badge {
        font-size: 12px;
        padding: 5px 12px;
    }

    /* SHARE SECTION */
    #single-blog .post-share {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px;
    }

    #single-blog .share-text {
        width: 100%; /* ek line le lega */
    }

    #single-blog .share-icons {
        gap: 8px;
    }

    #single-blog .share-icons a {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    /* FEATURE IMAGE */
    #single-blog .post-thumbnail img {
        height: 220px;
    }

    /* CONTENT TEXT */
    #single-blog .entry-content p {
        font-size: 15px;
    }

    #single-blog .entry-content h2 {
        font-size: 20px !important;
    }

    /* CONTENT IMAGE */
    #single-blog .entry-content .wp-block-image img {
        height: 220px;
    }

    /* SIDEBAR WIDGET */
    /*#single-blog .widget {
        padding: 20px;
    }*/

}

/* ============================= */
/*  TABLET (768px – 1024px) */
/* ============================= */
@media (max-width: 1024px) {

    #single-blog .single-blog-sectio1 {
        grid-template-columns: 1fr;
    }

    #single-blog .entry-title {
        font-size: 28px;
    }

    #single-blog .post-thumbnail img {
        height: 300px;
    }

    #single-blog .entry-content .wp-block-image img {
        height: 260px;
    }

    #single-blog .entry-meta {
        gap: 20px;
    }

    #single-blog .post-share {
        gap: 12px;
    }

    #single-blog .share-icons a {
        width: 34px;
        height: 34px;
    }

}

/* ============================= */
/*  SMALL LAPTOP (1025px – 1280px) */
/* ============================= */
@media (max-width: 1280px) {

    #single-blog .single-blog-container {
        padding: 0 20px;
    }

}


/* ============================= */
/* 🔥 EXTRA FIXES */
/* ============================= */

/* overflow fix (important) */
#single-blog img {
    max-width: 100%;
    height: auto;
}

/* sidebar widgets overflow fix */
#single-blog .widget {
    width: 100%;
    box-sizing: border-box;
}

/* long words break */
#single-blog .entry-content {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* buttons responsive */
#single-blog button,
#single-blog input {
    max-width: 100%;
}

/* fix grid breaking issue */
#single-blog .sb-left {
    min-width: 0;
}

/* ============================= */
/*  TABLET FIX (768px – 1024px) */
/* ============================= */
@media (min-width: 768px) and (max-width: 1024px) {

    /* 🔥 LAYOUT → STACK (already correct) */
    #single-blog .single-blog-sectio1 {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* 🔥 SIDEBAR FULL WIDTH CENTER */
    #single-blog .sb-right {
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
    }

    /* 🔥 ALL WIDGET SAME SIZE */
    #single-blog .widget,
    #newsletter-widget,
    #custom-cleaning-cta {
        width: 100% !important;
        max-width: 100% !important;
        /*padding: 25px !important;*/
        border-radius: 18px;
    }

    /* 🔥 SEARCH BOX FIX (Surface Duo issue solved) */
    #single-blog .widget_search input[type="search"] {
        height: 55px;
        font-size: 15px;

        padding: 0 400px 0 18px; /* 🔥 LEFT small, RIGHT button space */

        text-align: left;
    }

    /* Placeholder fix */
    #single-blog .widget_search input::placeholder {
        text-align: left;
    }

    /* Button (bada hi rahega) */
    #single-blog .widget_search button {
        width: 45px;
        height: 45px;
        right: 25px;
        top: 40%;
        transform: translateY(-50%);
    }


    /* 🔥 RECENT POSTS ALIGN FIX */
    #single-blog .post-item {
        align-items: flex-start;
    }

    #single-blog .post-thumb img {
        width: 75px;
        height: 75px;
    }

    /* 🔥 CATEGORY BOX FIX */
    #single-blog .widget_categories li {
        padding: 14px 16px;
    }

    /* 🔥 TAG CLOUD FIX */
    #single-blog .tagcloud {
        justify-content: flex-start;
    }

    /* 🔥 CTA CENTER */
    #custom-cleaning-cta {
        max-width: 100%;
    }

    /* 🔥 NEWSLETTER INPUT FIX */
    #newsletter-widget input {
        height: 50px;
        font-size: 14px;
    }

    #newsletter-widget button {
        height: 50px;
        font-size: 15px;
    }
}

/* ============================= */
/*  TAG CLOUD TABLET FIX */
/* ============================= */
/* --- Tablet Responsiveness Start --- */

@media only screen and (max-width: 1024px) {
    #single-blog .widget_tag_cloud {
        max-width: 100%; /* Tablet par box poori width le lega agar sidebar narrow ho */
        padding: 20px;
        margin: 0 auto 20px; /* Center align and bottom margin */
    }

    #single-blog .widget_tag_cloud .widget-title {
        font-size: 20px !important; /* Font thoda chhota tablet ke liye */
        margin-bottom: 20px !important;
    }

    #single-blog .tagcloud {
        gap: 6px !important; /* Spacing thodi kam kar di */
    }

    #single-blog .tagcloud a {
        padding: 5px 12px !important; /* Tags ko thoda compact banaya */
        font-size: 12px !important;
    }
}

/* Specifically for Mobile/Small Tablets (e.g. 768px and below) */
@media only screen and (max-width: 768px) {
    #single-blog .widget_tag_cloud {
        border-radius: 15px; /* Thoda kam radius */
    }
    
    #single-blog .tagcloud a {
        padding: 8px 14px !important; /* Mobile par touch-friendly banane ke liye size thoda badhaya */
        font-size: 13px !important;
    }
}
@media (max-width: 767px) {

    #sb-profile-card .sb-card {
        padding: 25px 20px;
        border-radius: 15px;
    }

    #sb-profile-card .sb-img-box {
        width: 90px;
        height: 90px;
        margin-bottom: 15px;
    }

    #sb-profile-card .sb-name {
        font-size: 18px;
    }

    #sb-profile-card .sb-role {
        font-size: 13px;
    }

    #sb-profile-card .sb-desc {
        font-size: 13px;
        line-height: 1.5;
    }

    #sb-profile-card .sb-social {
        gap: 10px;
    }

    #sb-profile-card .sb-icon {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {

    #sb-profile-card .sb-card {
        padding: 30px 20px;
    }

    #sb-profile-card .sb-img-box {
        width: 100px;
        height: 100px;
    }

    #sb-profile-card .sb-name {
        font-size: 19px;
    }

    #sb-profile-card .sb-desc {
        font-size: 13px;
    }

    #sb-profile-card .sb-icon {
        width: 42px;
        height: 42px;
    }
}

/* ===== TABLET (1024px) ===== */
@media (max-width: 1024px) {

    #single-blog .rp-main-title {
        font-size: 32px;
    }

    #single-blog .rp-cards {
        flex-wrap: nowrap;
        justify-content: center;
    }

    #single-blog .rp-card {
        width: 48%; /* 2 cards per row */
    }

    #single-blog .rp-image img {
        height: 200px;
    }
}

/* --- Tablet Responsiveness End --- */
/* Single blog (Related section Responsive code) 
/* ===== MOBILE (768px) ===== */
@media (max-width: 768px) {

    #single-blog .related-posts-section {
        padding: 60px 15px;
    }

    #single-blog .rp-main-title {
        font-size: 26px;
    }

    #single-blog .rp-header {
        margin-bottom: 30px;
    }

    #single-blog .rp-cards {
        flex-direction: column;
        gap: 20px;
    }

    #single-blog .rp-card {
        width: 100%; /* single column */
    }

    #single-blog .rp-image img {
        height: 190px;
    }

    #single-blog .rp-title {
        font-size: 18px;
    }
}


/* ===== SMALL MOBILE (480px) ===== */
@media (max-width: 480px) {

    #single-blog .rp-main-title {
        font-size: 22px;
    }

    #single-blog .rp-small-title {
        font-size: 12px;
    }

    #single-blog .rp-content {
        padding: 18px;
    }

    #single-blog .rp-image img {
        height: 190px;
    }

    #single-blog .rp-title {
        font-size: 16px;
    }

    #single-blog .rp-date {
        font-size: 12px;
    }
}
/* ============================= */
/*  RECENT POSTS (POPULAR POSTS) TABLET FIX */
/* ============================= */
@media (min-width: 768px) and (max-width: 1024px) {

    /*  FULL WIDTH SIDEBAR WIDGET */
    #single-blog .widget_recent_entries {
        max-width: 100% !important;
        width: 100%;
        padding: 25px;
    }

    /*  LIST ITEM */
    #single-blog .widget_recent_entries li {
        margin-bottom: 20px;
        padding-bottom: 15px;
    }

    /*  FLEX FIX */
    #single-blog .post-item {
        gap: 18px;
        align-items: center;
    }

    /*  IMAGE BIGGER */
    #single-blog .post-thumb img {
        width: 90px;
        height: 90px;
    }

    /*  TITLE BIGGER */
    #single-blog .post-title {
        font-size: 20px;
        line-height: 1.4;
    }

    /*  META FIX */
    #single-blog .post-meta-info {
        font-size: 15px;
        gap: 5px;
    }

    #single-blog .date,
    #single-blog .reading-time {
        font-size: 15px;
    }

    #single-blog .date i,
    #single-blog .reading-time i {
        font-size: 12px;
    }
}
/* ================= COMMENT SECTION ================= */

#comments {
    margin-top: 30px;
    /*padding: 30px;*/
    background: #f9fbff;
    border-radius: 12px;
}

/* Heading */
#comments .comments-title,
#reply-title {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 15px;
}

/* Logged in text */
.logged-in-as {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 15px;
}

.logged-in-as a {
    color: #2563eb;
    font-weight: 500;
}

.logged-in-as a:hover {
    color: #1e40af;
}

/* Labels */
#commentform label {
    font-weight: 500;
    color: #334155;
}

/* Required star */
.required {
    color: #ef4444;
}

/* TEXTAREA (Comment Box) */
#comments textarea {
    width: 100%;
    padding: 14px;
    border: 2px solid #888;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
    outline: none;
}

/* Focus effect */
#comments textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Submit Button */
#comments input[type="submit"] {
    background: #2563eb;
    color: #fff;
    padding: 12px 35px;
    border-radius: 8px;
    border: none;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
}

/* Button Hover */
#comments input[type="submit"]:hover {
    background: #1e40af;
    text-decoration: none;
    color: #000;
}

/* Small spacing fix */
#commentform p {
    margin-bottom: 18px;
    columns: #444;
}

/* Navigation links (optional polish) */
.post-navigation a,
.posts-navigation a {
    background: #e0ecff;
    padding: 6px 12px;
    border-radius: 6px;
    color: #1e293b;
    transition: 0.3s;
    font-weight: 700;
}

.post-navigation a:hover {
    background: #2563eb;
    color: #fff;
}

/*Contact Template*/

#wn-contact-page {
    padding: 80px 20px; /* top-bottom + left-right */
    max-width: 1200px;
    margin: 0 auto;
    background: #f8f9fb;
}

/* ================= CARDS ================= */
#wn-contact-page .wn-contact-cards {
    display: flex;
    gap: 25px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

#wn-contact-page .wn-card {
    flex: 1;
    min-width: 220px;
    background: #fff;
    padding: 35px 25px;
    border-radius: 20px;
    text-align: center;

    /* NORMAL SHADOW */
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);

    transition: all 0.3s ease;
}

/* HOVER EFFECT */
#wn-contact-page .wn-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* ================= ICON ================= */
#wn-contact-page .wn-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
}

/* Different colors for each card */
#wn-contact-page .wn-card:nth-child(1) .wn-icon {
    background:  #ff7a00;
}

#wn-contact-page .wn-card:nth-child(2) .wn-icon {
    background: #00bcd4;
}

#wn-contact-page .wn-card:nth-child(3) .wn-icon {
    background:#00c853;
}

#wn-contact-page .wn-card:nth-child(4) .wn-icon {
    background: #9e9e9e;
}

/* Card Title */
#wn-contact-page .wn-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #0a2540;
}

/*Card Text*/
#wn-contact-page .wn-card p {
    margin: 0;
    color: #555;
    font-size: 14px;
    font-weight: 600;
}

#wn-contact-page .wn-small-box {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffe8d6;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 14px;
    margin-bottom: 15px;
}

#wn-contact-page .wn-small-box span{
    color: #f54a00 ;
    font-size: 14px;
    font-weight: 700;
}

#wn-contact-page .wn-small-box i, #wn-contact-page .wn-small-box svg {
    color: #ff6600;
    font-size: 16px;
}

/* ===== CONTACT TITLE ===== */
#wn-contact-page .wn-contact-header h2 {
    font-size: 40px;
    font-weight: 800;
    margin: 15px 0;
    line-height: 1.2;
}

/* BLUE PART */
#wn-contact-page .wn-contact-header h2 .blue {
    color: #0b2c4d;
}

/* ORANGE PART */
#wn-contact-page .wn-contact-header h2 .orange {
    color: #ff6600;
}

/*Description*/
#wn-contact-page .wn-contact-header p{
    color: #777;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}
/* ===== MAIN LAYOUT ===== */
.wn-contact-main {
    display: flex;
    gap: 50px;
    align-items: stretch;
}
/* LEFT SIDE */
.wn-contact-left {
    flex: 1;
}

/*Righ Side*/
.wn-contact-right {
    flex: 1;
    display: flex;
}

.wn-location-box {
    width: 100%;
    height: 100%;
    min-height: 400px; /* optional for better look */
}

/* ================= FORM WRAPPER ================= */
/* Container */
#wn-contact-page .wn-contact-form {
    max-width: 600px; /* Is width ko aap apne design ke mutabiq kam ya zyada kar sakte hain */
    margin-left: 0 !important;   /* Forcefully left align karne ke liye */
    margin-right: auto;
    text-align: left;
}

/* Form Groups & Labels */
#wn-contact-page .form-group {
    margin-bottom: 12px !important; /* Puray group ka gap */
    text-align: left;
}

#wn-contact-page .wn-contact-form label {
    display: block;
    text-align: left;
    font-weight: 700;
    margin-bottom: 2px !important; /* Isse gap bhot kam ho jayega */
    color: #002147;
    font-size: 15px;
    line-height: 1.2; /* Text ki apni height kam karne ke liye */
}

/* Inputs, Select & Textarea */
#wn-contact-page .wn-contact-form input[type="text"],
#wn-contact-page .wn-contact-form input[type="email"],
#wn-contact-page .wn-contact-form input[type="tel"],
#wn-contact-page .wn-contact-form select,
#wn-contact-page .wn-contact-form textarea {
    width: 100%;
    padding: 15px 20px;
    border-radius: 15px; /* More rounded as per screenshot */
    border: 1.5px solid #e1e8ee;
    background-color: #fff;
    font-size: 15px;
    color: #333;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* Placeholder Color */
#wn-contact-page .wn-contact-form ::placeholder {
    color: #b0bec5;
}

/* Row Layout for First & Last Name */
#wn-contact-page .row-2 {
    display: flex;
    gap: 15px;
    justify-content: flex-start; 
}

#wn-contact-page .row-2 .form-group {
    flex: 1;
}

#wn-contact-page .form-group {
    text-align: left;
}

/* Focus Effect (Orange Border) */
#wn-contact-page .wn-contact-form input:focus,
#wn-contact-page .wn-contact-form select:focus,
#wn-contact-page .wn-contact-form textarea:focus {
    border-color: #ff5e00; /* Bright orange from screenshot */
    outline: none;
    box-shadow: 0 0 0 1px #ff5e00;
}

/* Textarea Specific */
#wn-contact-page .wn-contact-form textarea {
    height: 140px;
    resize: vertical;
}

/* Custom Submit Button */
#wn-contact-page .wn-submit-btn {
    width: 100%;
    background: #ff5e00;
    color: #fff;
    border: none;
    padding: 18px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(255, 94, 0, 0.2);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Icon */
#wn-contact-page .wn-submit-btn i, #wn-contact-page .wn-submit-btn svg {
    font-size: 16px;
    color: #fff;
    transition: transform 0.3s ease;
}

/* Hover */
#wn-contact-page .wn-submit-btn:hover {
    background: #e65500;
    box-shadow: 0 6px 20px rgba(255, 94, 0, 0.3);
    transform: scale(1.07);
    text-decoration: none;
}

#wn-contact-page .wn-submit-btn:hover i, #wn-contact-page .wn-submit-btn:hover svg {
    transform: translateX(5px);
}

#wn-contact-page .wn-contact-form p {
    margin: 0 !important;
    padding: 0 !important;
}

#wn-contact-page .wn-contact-form input[type="text"],
#wn-contact-page .wn-contact-form input[type="email"],
#wn-contact-page .wn-contact-form input[type="tel"],
#wn-contact-page .wn-contact-form select {
    padding: 12px 18px; /* Pehle 15px tha, 12px se box thoda sleek lagega */
    margin-top: 0 !important;
}


/* ===== LOCATION BOX ===== */
#wn-contact-page .wn-location-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;

    background: #D1F7F4; /* light teal */
    border-radius: 25px;
    padding: 60px 30px;
    height: 100%;

    position: relative;
    overflow: hidden;
}

/* BIG BACKGROUND ICON */
#wn-contact-page .wn-location-icon {
    position: absolute;
    font-size: 140px;
    color: rgba(0, 150, 160, 0.2);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* TEXT ABOVE ICON */
#wn-contact-page .wn-location-box h3 {
    position: relative;
    font-size: 22px;
    font-weight: 800;
    color: #0a2540;
    margin-bottom: 15px;
}

#wn-contact-page .wn-location-box p {
    position: relative;
    margin: 0;
    font-size: 15px;
    color: #364153;
    font-weight: 600;
}

/* CLICK EFFECT */
#wn-contact-page .wn-location-box:active {
    transform: scale(0.98);
}

/* ================= RESPONSIVE ================= */

/* ===== LARGE TABLET (1024px) ===== */
@media (max-width: 1024px) {

    .wn-contact-main {
        gap: 30px;
    }

    #wn-contact-page .wn-contact-header h2 {
        font-size: 32px;
    }

    .wn-location-icon {
        font-size: 110px;
    }

}


/* ===== TABLET (900px) ===== */
@media (max-width: 900px) {

    /* STACK LAYOUT */
    .wn-contact-main {
        flex-direction: column;
    }

    .wn-contact-right {
        order: 2; /* 🔥 form ke baad ayega */
    }

    .wn-contact-left {
        order: 1;
    }

    /* LOCATION BOX HEIGHT FIX */
    .wn-location-box {
        min-height: 420px; /*  increase */
        padding: 50px 25px;
    }

    /* ICON SIZE */
    .wn-location-icon {
        font-size: 100px;
    }

}

/* ===== MOBILE (600px) ===== */
@media (max-width: 600px) {

    #wn-contact-page {
        padding: 50px 15px;
    }

    /* CARDS STACK */
    #wn-contact-page .wn-contact-cards {
        flex-direction: column;
        gap: 15px;
    }

    /* CARD STYLE */
    #wn-contact-page .wn-card {
        padding: 25px 20px;
    }

    /* HEADER TEXT */
    #wn-contact-page .wn-contact-header h2 {
        font-size: 26px;
    }

    #wn-contact-page .wn-contact-header p {
        font-size: 14px;
    }

    /* SMALL BADGE */
    #wn-contact-page .wn-small-box {
        font-size: 12px;
        padding: 6px 14px;
    }

    /* FORM INPUTS */
    #wn-contact-page .wn-contact-form input,
    #wn-contact-page .wn-contact-form select,
    #wn-contact-page .wn-contact-form textarea {
        padding: 12px 15px;
        font-size: 14px;
    }

    /* NAME FIELDS STACK */
    #wn-contact-page .row-2 {
        flex-direction: column;
        gap: 10px;
    }

    /* BUTTON */
    #wn-contact-page .wn-submit-btn {
        font-size: 16px;
        padding: 15px;
    }

    /* LOCATION BOX */
    .wn-location-box {
        min-height: 300px; /* 🔥 better */
        padding: 40px 20px;
    }

    .wn-location-icon {
        font-size: 80px;
    }

    #wn-contact-page .wn-location-box h3 {
        font-size: 18px;
    }

    #wn-contact-page .wn-location-box p {
        font-size: 13px;
    }

}


/* ===== SMALL MOBILE (400px) ===== */
@media (max-width: 400px) {

    #wn-contact-page .wn-contact-header h2 {
        font-size: 22px;
    }

    .wn-location-icon {
        font-size: 60px;
    }

    .wn-location-box {
        min-height: 280px;
    }

}
/* SMALL TABLET ONLY (iPad Mini / Air) */
@media (min-width: 768px) and (max-width: 991px) {

    #wn-contact-page .wn-card {
        flex: 0 0 calc(50% - 13px);
        max-width: calc(50% - 13px);
    }

}

/* //  *******************************************
//  Woo Commerce : Shop Page
//  ******************************************* // */

/* Reset the Product List Grid */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 41px;
    padding: 2rem 0;
    margin: 0;
    justify-self: anchor-center;
}

/* THE CARD: Rounded Corners, Soft Shadow & Bottom Space for Buttons */
.woocommerce ul.products li.product {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px;
    padding-bottom: 75px;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 384px;
    margin: 0 0 30px 0;
    display: flex;
    flex-direction: column;
    text-align: left;
    border: none;
    position: relative;
    overflow: hidden;

    /* ADD THIS LINE FOR SMOOTHNESS 
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);*/
}

/* THE CARD HOVER EFFECT */
.woocommerce ul.products li.product:hover {
    /* Moves the card up by 8px 
    transform: translateY(-8px); */

    /* Deepens and widens the shadow for a "lifted" look */
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.15);

    /* Optional: very slight border if you want more definition */
    background: #ffffff;
}

/* THE IMAGE */
.woocommerce ul.products li.product a img {
    width: 100%;
    height: 256px;
    object-fit: cover;
    background-color: #000;
    border-radius: 12px;
    margin-bottom: 15px;
    display: block;
    box-shadow: none;
}

/* Eye Icon Overlay on Image */
.product-image-eye-overlay {
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    color: #FF5500;
    /* Orange eye */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.woocommerce ul.products li.product:hover .product-image-eye-overlay {
    opacity: 1;
}

/* STAR RATINGS (Yellow) */
.woocommerce ul.products li.product .star-rating {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #FFC107;
}

/* THE TITLE: Dark Blue */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0 0 10px 0;
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    color: #0a2540;
    text-align: left;
    line-height: 1.3;
}

/* THE TITLE HOVER EFFECT */
.woocommerce ul.products li.product .woocommerce-loop-product__title:hover {
    color: #ff6900;
    /* Vibrant Orange to match your theme */
    cursor: pointer;
    transition: color 0.3s ease;
    /* Makes the color fade in/out smoothly */
}

/* THE PRICE: Vivid Orange */
.woocommerce ul.products li.product .price {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0 0 0px 0;
    display: block;
    color: #ff6900;
    font-size: 24px;
    font-weight: 800;
    text-align: left;
    /* margin-bottom: 16px;*/
}

/* Fix Price display issues (Hide "Price" word and remove underline) */
.woocommerce ul.products li.product .price strong {
    display: none;
}

.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price span,
.woocommerce ul.products li.product .price bdi {
    text-decoration: none;
    border-bottom: none;
}

/* Hide original del/sale tags */
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .onsale {
    display: none;
}

/* --- BULLETPROOF BUTTONS (Overrides Theme Wrappers) --- */

/* 1. Ensure the card has space at the bottom */
.woocommerce ul.products li.product {
    position: relative;
}

/* 2. Strip any weird formatting from theme <p> or <div> wrappers */
.woocommerce ul.products li.product p.button,
.woocommerce ul.products li.product .add-to-cart-wrap {
    position: static;
    margin: 0;
    padding: 0;
}

/* 3. The Teal Eye Circle (Targeted directly) */
.woocommerce ul.products li.product a.custom-quick-view-circle {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    min-width: 48px;
    background-color: #00C4CC;
    /* Force Teal */
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 99;
    /* Forces it to the front */
    text-decoration: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
}

.woocommerce ul.products li.product a.custom-quick-view-circle:hover {
    background-color: #00AAB0;
}

/* 4. The Main Add to Cart Button (Nuking the Purple) */
.woocommerce ul.products li.product a.button.add_to_cart_button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product button.button {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 80px;
    /* Leaves exactly enough room for the 48px eye circle */
    height: 48px;
    /* Matches the eye circle height */
    background: linear-gradient(to right, #ff6900, #f54a00);
    /* Force Orange */
    color: #ffffff;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 20px;
    border: none;
    z-index: 99;
    gap: 11px;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
}

/* Cart Icon inside the button */
.woocommerce ul.products li.product a.button::before,
.woocommerce ul.products li.product button.button::before {
    font-weight: 900;
    margin-right: 8px;
}

.woocommerce ul.products::before,
.woocommerce-page ul.products::after,
.woocommerce-page ul.products::before {
    content: " ";
    display: none;
}


.woocommerce ul.products.columns-3 li.product,
.woocommerce-page ul.products.columns-3 li.product {
    width: 100%;
}

.woocommerce span.onsale {
    min-height: 3.236em;
    display: none;
    min-width: 3.236em;
    padding: .202em;
    font-size: 1em;
    font-weight: 700;
    position: absolute;
    text-align: center;
    line-height: 3.236;
    top: -.5em;
    left: -.5em;
    margin: 0;
    border-radius: 100%;
    background-color: #958e09;
    color: #fff;
    font-size: .857em;
    z-index: 9;
}




.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb {
    font-size: .92em;
    color: #767676;
    display: none;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    background: #fff;
    display: none;
    border: none;
    box-sizing: content-box;
    border-radius: 100%;
    cursor: pointer;
    font-size: 2em;
    height: 36px;
    padding: 0;
    position: absolute;
    right: .5em;
    text-indent: -9999px;
    top: .5em;
    width: 36px;
    z-index: 99;
}

/* =========================================
   UNIVERSAL RESPONSIVE IMPROVEMENTS
   (SAFE ADD-ON – NO THEME BREAK)
   ========================================= */

/* Better container control */
.woocommerce ul.products {
    max-width: 1300px;
    margin: 0 auto;
    /* centers grid */
}

/* Fix card alignment issue */
.woocommerce ul.products li.product {
    margin-left: auto;
    margin-right: auto;
}

/* Ultra Large Screens (≥ 1400px) */
@media (min-width: 1400px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
        gap: 50px;
    }

    .woocommerce ul.products li.product a img {
        height: 256px;
    }
}

/* Large Laptops (1200px - 1399px) */
@media (max-width: 1399px) and (min-width: 1200px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
        gap: 35px;
    }
}

/* Small Laptops (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* Tablets (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

/* Large Mobile (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .woocommerce ul.products li.product a img {
        height: 180px;
    }
}

/* Small Mobile (≤ 575px) */
@media (max-width: 575px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr;
        /* single column */
        gap: 20px;
    }

    .woocommerce ul.products li.product {
        max-width: 100%;
    }

    .woocommerce ul.products li.product a img {
        height: 200px;
    }

    /* Full width button */
    .woocommerce ul.products li.product a.button,
    .woocommerce ul.products li.product button.button {
        left: 15px;
        right: 15px;
    }

    /* Move eye button above */
    .woocommerce ul.products li.product a.custom-quick-view-circle {
        bottom: 75px;
    }
}

/*=================================End Shop Page====================*/



/* =========================================
   1.Single Prodeuct  PAGE / PRODUCT GRID
   ========================================= */

/* Fix overflow and prevent stretching */
.woocommerce ul.products li.product {
    overflow: visible;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
}

.woocommerce ul.products li.product a img {
    object-fit: cover;
}

/* Responsive Grid Configuration */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* Auto-scaling grid for desktop/laptops */
    gap: 20px;
}

@media (max-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr;
        padding: 1.5rem 12px;
    }

    .woocommerce ul.products li.product {
        padding: 12px;
        padding-bottom: 90px;
        border-radius: 12px;
    }

    .woocommerce ul.products li.product a img {
        height: 160px;
        border-radius: 8px;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 15px;
        line-height: 1.2;
    }

    .woocommerce ul.products li.product .price {
        font-size: 16px;
    }

    /* Full width buttons on mobile */
    .woocommerce ul.products li.product a.button,
    .woocommerce ul.products li.product button.button {
        left: 10px;
        right: 10px;
        height: 40px;
        font-size: 13px;
        border-radius: 30px;
    }

    .woocommerce ul.products li.product a.button::before {
        margin-right: 6px;
    }

    .woocommerce ul.products li.product a.custom-quick-view-circle {
        bottom: 65px;
        right: 12px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}


/* =========================================
   2. SINGLE PRODUCT - LAYOUT & TYPOGRAPHY
   ========================================= */

.woocommerce div.product {
    position: relative;
    margin: 2rem auto;
    max-width: 1300px;
    /* Caps max width on ultra-wide screens */
}

/* Fluid typography: scales from 22px on mobile to 36px on desktop smoothly */
.woocommerce div.product .product_title {
    clear: none;
    margin-top: 0;
    padding: 0;
    font-size: clamp(22px, 4vw, 36px);
    color: #0a2540;
    font-weight: 800;
    margin-bottom: 16px;
}

.woocommerce-product-details__short-description {
    color: #4a5565;
    letter-spacing: 0.7px;
    font-size: clamp(16px, 2vw, 18px);
    margin-bottom: 32px;
}

.single-product .woocommerce-product-details__short-description {
    display: none !important;
}

/* Meta Data & SKU */
.single-product .product-meta-sku {
    margin: 0 0 12px 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.single-product .product-meta-sku .sku-label {
    font-size: 14px;
    font-weight: 400;
}

.single-product .product-meta-sku .sku-value {
    color: #6a7282;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

/* Ratings */
.single-product div.product .woocommerce-product-rating.webnotick-product-rating {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 20px 0 !important;
    clear: both;
    float: none !important;
}

.single-product .webnotick-product-rating .star-rating {
    float: none !important;
    margin: 0 !important;
    font-size: 18px !important;
    color: #ffc107 !important;
    width: 5.4em;
    height: 1.1em;
}

.single-product .webnotick-product-rating .webnotick-rating-num {
    font-weight: 800;
    font-size: 18px;
    color: #0a2540;
}

.single-product .webnotick-product-rating .webnotick-rating-reviews {
    font-size: 15px;
    color: #6b7280;
    font-weight: 500;
}

.single-product .webnotick-product-rating .woocommerce-review-link {
    font-size: 14px;
    font-weight: 700;
    margin-left: 4px;
}


/* =========================================
   3. SINGLE PRODUCT - PRICE & STOCK
   ========================================= */

.single-product div.product .summary .price {
    display: flex !important;
    flex-wrap: wrap !important;
    /* Allows wrapping on tiny screens */
    align-items: baseline !important;
    gap: 10px 15px !important;
    margin-bottom: 25px !important;
    font-size: 0 !important;
}

.single-product div.product .summary .price ins {
    order: 1 !important;
    text-decoration: none !important;
    color: #ff6900 !important;
    font-weight: 800 !important;
    font-size: clamp(26px, 5vw, 48px) !important;
    /* Fluid scaling */
    display: inline-block !important;
}

.single-product div.product .summary .price del {
    order: 2 !important;
    color: #99a1af !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
    font-size: clamp(16px, 3vw, 24px) !important;
    display: inline-block !important;
}

.single-product div.product .summary .onsale {
    order: 3 !important;
    position: static !important;
    background-color: #00c853 !important;
    color: #ffffff !important;
    padding: 6px 18px !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    margin: 0 !important;
    min-height: auto !important;
    min-width: auto !important;
}

/* Stock Status */
.single-product .product-stock-line {
    margin: 0 0 20px 0;
}

.single-product .product-stock-line .stock {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.single-product .product-stock-line .stock.in-stock {
    color: #00a854;
}

.single-product .product-stock-line .stock.in-stock::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 16px;
}

.single-product .product-stock-line .stock.out-of-stock {
    color: #c62828;
}

.single-product .product-stock-line .variable-stock-hint {
    color: #6b7280;
    font-style: italic;
}


/* =========================================
   4. ADD TO CART FORM & BUTTONS
   ========================================= */

.single-product div.product form.cart,
.single-product div.product form.cart .woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    gap: 15px !important;
}

/* Wrapper clearups */
.action-buttons-wrapper,
.quantity-buttons,
.single-product div.product form.cart .single_variation_wrap {
    display: contents !important;
}

/* Variations */
.single-product div.product form.cart table.variations {
    flex: 0 0 100% !important;
    margin-bottom: 10px !important;
    width: 100%;
    border: 0;
    border-spacing: 0 12px;
}

.single-product form.variations_form .woocommerce-variation-availability,
.custom-variation-description {
    display: none !important;
}

body.webnotick-single-variation-product .single-product form.cart table.variations,
body.webnotick-single-variation-product .single-product form.cart a.reset_variations {
    display: none !important;
}

.woocommerce div.product form.cart table.variations th.label {
    vertical-align: middle;
    padding: 0 16px 0 0;
    width: 1%;
    white-space: nowrap;
    font-weight: 800;
    font-size: 14px;
    color: #0a2540;
}

.woocommerce div.product form.cart table.variations th.label label {
    text-transform: capitalize;
}

.woocommerce div.product form.cart table.variations td.value {
    width: 100%;
}

.woocommerce div.product form.cart table.variations select {
    width: 100%;
    max-width: 100%;
    /* Changed from fixed 420px to prevent breaking on mobile */
    min-height: 48px;
    padding: 10px 40px 10px 16px;
    font-size: 16px;
    font-weight: 600;
    color: #0a2540;
    background-color: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    appearance: auto;
    box-sizing: border-box;
}

.woocommerce div.product form.cart table.variations select:focus {
    border-color: #ff6a00;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.15);
}

.woocommerce div.product form.cart .reset_variations {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #00b8db;
}

/* Quantity Controls */
.quantity-label {
    flex: 0 0 100%;
    display: block;
    font-weight: 800;
    font-size: 14px;
    color: #0a2540;
    margin-bottom: 12px;
}

.quantity {
    display: inline-flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border-radius: 50px !important;
    border: 4px solid #e5e7eb !important;
    height: 54px !important;
    flex: 1 1 180px !important;
    /* Now allowed to shrink/grow */
    max-width: max-content;
    box-sizing: border-box !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.quantity button,
.quantity .minus,
.quantity .plus {
    width: 60px !important;
    height: 100% !important;
    border: none !important;
    background: #f3f4f6 !important;
    color: #333 !important;
    font-size: 24px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.quantity input.qty {
    flex: 1;
    width: 60px;
    height: 100%;
    background: #ffffff;
    border: none;
    font-weight: 800;
    font-size: 20px;
    text-align: center;
    color: #0a2540;
    margin: 0;
    box-sizing: border-box;
}

.quantity button:hover,
.quantity .minus:hover,
.quantity .plus:hover {
    background-color: #ff6a00 !important;
    color: #ffffff !important;
}

.quantity .minus {
    order: -1 !important;
}

.quantity .plus {
    order: 1 !important;
}

/* =========================================
   ASYMMETRICAL BUTTON ALIGNMENT (70/30 SPLIT)
   ========================================= */

/* Ensure the quantity and total force the buttons to start on a fresh line if needed */
.quantity-total-wrapper {
    flex: 1 1 auto !important;
    min-width: max-content !important;
}

/* "Add to Cart" gets ~70% of the space */
.single-product div.product form.cart .single_add_to_cart_button {
    flex: 0 0 calc(65% - 8px) !important;
    margin: 0 !important;
}

/* "Buy Now" gets ~30% of the space */
.single-product div.product form.cart .buy-now-btn {
    flex: 0 0 calc(28% - 8px) !important;
    margin: 0 !important;
}

.total-label {
    font-weight: 800 !important;
    font-size: clamp(18px, 3vw, 24px) !important;
    color: #0a2540 !important;
    margin-right: 8px !important;
}

.total-price-display {
    font-weight: 800 !important;
    font-size: clamp(18px, 3vw, 24px) !important;
    color: #ff6a00 !important;
}

/* Add To Cart & Buy Now Buttons */
.single-product div.product form.cart .single_add_to_cart_button,
.single-product div.product form.cart .buy-now-btn {
    flex: 1 1 calc(50% - 15px);
    /* Automatically splits width or full-width on mobile */
    min-width: 200px;
    /* Forces wrap on small screens */
    height: 55px;
    border-radius: 50px;
    border: none;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    margin: 0;
    padding: 0 20px;
}

.single-product div.product form.cart .single_add_to_cart_button {
    background: linear-gradient(to right, #ff6900, #f54a00);
}

.single-product div.product form.cart .single_add_to_cart_button::before {
    content: "\f07a";
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    margin-right: 10px;
}

.single-product div.product form.cart .buy-now-btn {
    background: linear-gradient(to right, #00b8db, #00bba7);
}

.single-product div.product form.cart .buy-now-btn::before {
    content: none !important;
}

.single-product div.product form.cart .single_add_to_cart_button:hover {
    background-color: #e64d00 !important;
    transform: translateY(-2px) scale(1.02) !important;
}

.single-product div.product form.cart .buy-now-btn:hover {
    background-color: #00aeb6 !important;
    transform: translateY(-2px) scale(1.02) !important;
}


/* =========================================
   5. GALLERY & THUMBNAILS
   ========================================= */

.woocommerce-product-gallery .flex-viewport {
    border: 3px solid #f9d8b8 !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06) !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 600px !important;
    /* Fixed forced height issues */
    aspect-ratio: 1 / 1;
    /* Maintains square shape beautifully across all screens */
}

.woocommerce-product-gallery .flex-viewport img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 17px !important;
    margin: 0 !important;
}

.woocommerce-product-gallery .woocommerce-product-gallery__image {
    border: none !important;
    box-shadow: none !important;
}

/* Thumbnails */
.flex-control-nav.flex-control-thumbs {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px !important;
    margin-top: 20px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
}

.flex-control-nav.flex-control-thumbs li {
    flex: 1 1 20% !important;
    width: auto !important;
    margin: 0 !important;
}

.flex-control-nav.flex-control-thumbs img {
    width: 96% !important;
    height: auto !important;
    aspect-ratio: 2 / 1.4;
    object-fit: cover !important;
    border-radius: 12px !important;
    border: 2px solid #e5e7eb !important;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box !important;
}

.flex-control-nav.flex-control-thumbs img.flex-active {
    border: 4px solid #ff6a00 !important;
    box-shadow: 0 4px 10px rgba(255, 106, 0, 0.2) !important;
}

.flex-control-nav.flex-control-thumbs img:not(.flex-active):hover {
    border-color: #67e8f9 !important;
    border-width: 4px !important;
}





/* --- Vertical Container Styling --- */
.custom-product-actions {
    display: flex;
    flex-direction: row;
    /* This stacks them vertically */
    gap: 12px;
    /* Space between the buttons */
    margin-top: 25px;
    width: 100%;
    /* Full width of the container */
}

/* --- Base Button Styling --- */
.custom-product-actions .action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    /* Slightly taller for better touch targets */
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    background: #ffffff;
    color: #002b5b;
    /* Dark navy text */
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    width: 100%;
    /* Forces buttons to be full width */
    transition: all 0.3s ease;
}

/* Icon Color Inheritance */
.custom-product-actions .action-btn i {
    font-size: 16px;
    color: inherit;
}

/* --- THE HOVER EFFECTS --- */

/* 1. Wishlist Hover (Orange) */
.custom-product-actions .wishlist-btn:hover {
    border-color: #ff6b00;
    color: #ff6b00;
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.08);
}

/* 2. Share Hover (Cyan) */
.custom-product-actions .share-btn:hover {
    border-color: #00bcd4;
    color: #00bcd4;
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.08);
}

.woocommerce div.product form.cart .woocommerce-variation-description p {
    margin-bottom: 1em;
    font-size: 18px;
    color: #4a5565;
    letter-spacing: 0.5px;
}

/*Description*/


/* ==========================================================
   FINAL PRODUCT TABS DESIGN (FIGMA MATCH)
   ========================================================== */


/* 2. Horizontal Tabs Header */
.custom-horizontal-tabs.nav-tabs {
    border: none;
    border-bottom: 1px solid #f0f0f0 !important;
    /* Full-width light line */
    margin-bottom: 0 !important;
    padding-left: 20px !important;
    display: flex !important;
    gap: 40px !important;
}

.custom-horizontal-tabs .nav-link {
    border: none;
    background: transparent;
    color: #7a7a7a;
    /* Muted gray for inactive */
    font-weight: 600;
    padding: 16px 32px;
    position: relative;
    font-size: 18px !important;
    transition: color 0.3s ease;
    outline: none !important;
    /* Removes focus border */
}

/* The Orange Active State & Line */
.custom-horizontal-tabs .nav-link.active {
    color: #ff6b00 !important;
}

.custom-horizontal-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    /* Sits exactly on the light gray line */
    left: 0;
    width: 100%;
    height: 3px;
    background: #ff6b00 !important;
    border-radius: 10px;
    z-index: 1;
}

/* 3. The Main White Card styling (Single Wrapper) */
/* --- Updated White Card styling with Figma Shadow --- */
.custom-spec-card {
    background: #ffffff !important;
    border-radius: 24px !important;
    /* High-end rounded corners */
    padding: 48px !important;
    /* Spacious padding to match mockup */
    margin-top: 25px !important;

    /* THE FIGMA SHADOW */
    /* 0px X-offset, 15px Y-offset (pushed down), 50px Blur, 0.04 Opacity (very subtle) */
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.04) !important;

    /* Extra thin border for clean definition on white backgrounds */
    border: 1px solid rgba(0, 0, 0, 0.02) !important;

    box-sizing: border-box;
    transition: box-shadow 0.3s ease;
    /* Smooth transition if we add hover */
}

/* Fix for "Double Box": Remove card styling from individual panes */
.tab-pane#tab-description,
.tab-pane#tab-additional_information {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* 4. Hiding the Automatic WC Tab Title */
.custom-spec-card h2:first-child,
.custom-spec-card .woocommerce-Tabs-panel-details>h2 {
    display: none !important;
}

/* 5. Typography */
.custom-product-title,
.custom-spec-card h3 {
    font-size: 30px !important;
    font-weight: 900 !important;
    color: #0a2540 !important;
    margin-bottom: 24px !important;
    margin-top: 0 !important;
}

.custom-product-intro {
    color: #666 !important;
    line-height: 1.8 !important;
    font-size: 18px !important;
    margin-bottom: 24px;
}

.custom-features-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0d1b3e !important;
    margin-top: 30px !important;
    margin-bottom: 16px !important;
}

/* 6. Feature List (2 Columns + Checkmarks) */
.custom-features-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px 30px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 0 0 !important;
}

.custom-features-list li {
    position: relative !important;
    padding-left: 30px !important;
    color: #444 !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
}

.custom-features-list li::before {
    content: '✓' !important;
    position: absolute !important;
    left: 0 !important;
    color: #28a745 !important;
    font-weight: bold !important;
    font-size: 18px !important;
}

/* 7. The Specifications Table */
table.shop_attributes {
    border: none !important;
    width: 100% !important;
}

table.shop_attributes tr {
    display: flex !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #f5f5f5 !important;
    padding: 18px 0 !important;
}

table.shop_attributes tr:last-child {
    border-bottom: none !important;
}

table.shop_attributes th {
    background: none !important;
    border: none !important;
    text-align: left !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    padding: 0 !important;
}

table.shop_attributes td {
    background: none !important;
    border: none !important;
    text-align: right !important;
    font-style: normal !important;
    color: #777 !important;
    padding: 0 !important;
}

/* Mobile View */
@media (max-width: 600px) {
    .custom-features-list {
        grid-template-columns: 1fr !important;
    }
}


/* --- Force the Specifications Table to Figma Style --- */

/* 1. Ensure the container is a clean white card */
.custom-spec-card {
    background: #ffffff !important;
    border-radius: 24px !important;
    padding: 60px !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.02) !important;
}

/* 2. Style the Tab Heading inside the card */
.custom-spec-card h2 {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: #0d1b3e !important;
    margin-bottom: 30px !important;
    display: block !important;
    text-align: left !important;
}

/* 3. Reset the Table completely */
.woocommerce-tabs table.shop_attributes {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    display: table !important;
    /* Reset to standard table for a moment */
}

/* 4. Force Row to be Full Width Flexbox */
.woocommerce-tabs table.shop_attributes tr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    border-bottom: 1px solid #f2f2f2 !important;
    padding: 16px 0 !important;
    background: transparent !important;
}

/* 5. Force Label (Left) styling */
.woocommerce-tabs table.shop_attributes th {
    flex: 1 !important;
    text-align: left !important;
    font-weight: 700 !important;
    color: #0d1b3e !important;
    font-size: 18px !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

/* 6. Force Value (Right) styling */
.woocommerce-tabs table.shop_attributes td {
    flex: 1 !important;
    text-align: right !important;
    font-style: normal !important;
    color: #7a7a7a !important;
    font-size: 18px !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

/* 7. Hide the Weight and Dimensions N/A rows */
.woocommerce-product-attributes-item--weight,
.woocommerce-product-attributes-item--dimensions {
    display: none !important;
}


/* --- 1. Section Headings & Container --- */
.related.products {
    padding: 80px 20px;
    text-align: center;
    background-color: #fff;
}

.related.products h1.newarrivals {
    font-size: 38px;
    font-weight: 800;
    color: #002d5b;
    /* Dark Navy */
    margin-bottom: 10px;
}

.related.products h1.newarrivals::after {
    content: " Like";
    color: #ff5500;
    /* Orange */
}

.related.products h2 {
    font-size: 16px;
    font-weight: 400;
    color: #777;
    margin-bottom: 50px;
    letter-spacing: 0.5px;
}

/* --- 2. The Product Card (The Fix) --- */
.related.products ul.products li.product {
    background: #ffffff;
    border-radius: 25px;
    padding: 24px;
    width: 299px;
    text-align: left;
    margin: 0 !important;

    /* Layout */
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 427px;

    /* BASE BOX SHADOW */
    /* A subtle, soft shadow that makes the card sit gently on the page */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.02);

    /* Smooth transition for the lift effect 
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.3s ease;*/
}

/* --- HOVER STATE --- */
.related.products ul.products li.product:hover {
    /* Lift the card slightly 
    transform: translateY(-8px);*/

    /* HOVER BOX SHADOW */
    /* A deeper, wider shadow to simulate the card being closer to the user */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12),
        0 10px 20px rgba(0, 0, 0, 0.05) !important;
}

/* --- 3. Image, Title & Price --- */
.related.products ul.products li.product img {
    border-radius: 20px;
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-bottom: 15px;
}

.related.products ul.products li.product .woocommerce-loop-product__title {
    font-size: 18px;
    font-weight: 700;
    color: #002d5b;
    margin-bottom: 10px;
    min-height: 45px;
    /* Keeps titles aligned */
}

/* PRICE: High Priority Spacing */
.related.products ul.products li.product .price {
    display: block !important;
    color: #ff5500 !important;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 16px !important;
    /* Forces the buttons away */
    line-height: 1.2;
    visibility: visible !important;
    opacity: 1 !important;
}

/* --- 4. The Button Group --- */

/* Orange Button */
.custom-cart-btn {
    background-color: #ff5500 !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 14px 15px !important;
    flex: 1;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Teal Eye */
.custom-quick-view-circle {
    background-color: #00bfa5 !important;
    color: #ffffff !important;
    width: 50px;
    height: 50px;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- 5. The Button Group (Pill Shape) --- */
.button-group-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto;
    /* Pushes content to the bottom */
    width: 100%;
}

/* Wide Orange Button */
.custom-cart-btn {
    background-color: #ff5500 !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    /* Perfect Pill Shape */
    padding: 16px 20px !important;
    flex: 1;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none !important;
    transition: background 0.3s ease;
}

.custom-cart-btn:hover {
    background-color: #e64d00 !important;
}

/* Round Teal Circle */
.custom-quick-view-circle {
    background-color: #00bfa5 !important;
    /* Action Teal */
    color: #ffffff !important;
    width: 55px;
    height: 55px;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    transition: all 0.3s ease;
}

.custom-quick-view-circle:hover {
    background-color: #009688 !important;
    transform: rotate(15deg) scale(1.05);
}

.custom-quick-view-circle i {
    font-size: 20px;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
    margin: 0 0 0 50px;
    border: 1px solid #e1dde7;
    border-radius: 67p;
    /* padding: 2em 2em; */
    padding: 2em;
    border-radius: 37px;
}

.woocommerce .star-rating {
    float: right;
    overflow: hidden;
    position: relative;
    height: 1em;
    line-height: 1;
    font-size: 1em;
    color: gold;
    width: 5.4em;
    font-family: WooCommerce;
}

.woocommerce #review_form #respond {
    position: static;
    margin: 0;
    width: auto;
    padding: 28px;
    background: transparent none;
    border-radius: 39px;
}

/* 2. Title Styling */
#reply-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #0d1b2a !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* 3. Labels (Your rating / Your review) */
.comment-form-rating label,
.comment-form-comment label {
    font-weight: 600 !important;
    color: #4a5568 !important;
    display: block !important;
    margin-bottom: 10px !important;
}

/* 4. The Star Rating Icons */
.stars a {
    color: #cbd5e1 !important;
    /* Grey when empty */
    font-size: 1.2em !important;
    margin-right: 5px !important;
}

.stars a:hover,
.stars a.active {
    color: #fbbf24 !important;
    /* Gold when hovered/selected */
}

/* 5. The Textarea (Review box) */
#commentform textarea {
    width: 100% !important;
    background-color: #f8fafc !important;
    /* Very light blue-grey */
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 15px !important;
    font-family: inherit !important;
    transition: all 0.3s ease !important;
    outline: none !important;
}

#commentform textarea:focus {
    background-color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
}

/* 6. The Submit Button */
input#submit {
    background-color: #0f172a !important;
    /* Dark modern blue/black */
    color: white !important;
    padding: 12px 30px !important;
    border-radius: 8px !important;
    border: none !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
}

input#submit:hover {
    background-color: #3b82f6 !important;
    /* Bright blue on hover */
}

/* =========================================
   GLOBAL RESPONSIVE ADJUSTMENTS
   ========================================= */

/* ===== SMALL LAPTOPS (≤ 1200px) ===== */
@media (max-width: 1200px) {
    .woocommerce div.product {
        margin: 2rem 3rem;
    }
}


/* ===== TABLETS & IPAD (≤ 1024px) ===== */
@media (max-width: 1024px) {

    /* Stack the Single Product layout vertically */
    .woocommerce div.product {
        display: flex !important;
        flex-direction: column !important;
        margin: 2rem 1.5rem;
    }

    /* Make both the gallery and the text take up full width */
    .woocommerce div.product .woocommerce-product-gallery,
    .woocommerce div.product .summary {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-bottom: 30px;
    }

    /* Shop Grid: Keep at 1 column for tablet based on your setting */
    .woocommerce ul.products {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
}


/* ===== MOBILE PHONES (≤ 768px) ===== */
@media (max-width: 768px) {

    /* --- 1. Single Product Layout & Quantity --- */
    .woocommerce div.product {
        margin: 1.5rem 1rem;
    }

    .quantity {
        max-width: 100%;
        flex: 1 1 100% !important;
    }

    .quantity-total-wrapper {
        flex: 1 1 100% !important;
    }

    .single-product div.product form.cart .single_add_to_cart_button,
    .single-product div.product form.cart .buy-now-btn {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* --- 2. Wishlist & Share Buttons --- */
    .custom-product-actions {
        gap: 8px;
    }

    .custom-product-actions .action-btn {
        padding: 12px 8px;
        font-size: 13px;
        white-space: nowrap;
        gap: 6px;
    }

    /* --- 3. Figma Tabs (App-Style Swipe) --- */
    .custom-horizontal-tabs.nav-tabs {
        flex-wrap: nowrap !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding-left: 0 !important;
        padding-bottom: 5px !important;
        padding-right: 40px !important;
    }

    .custom-horizontal-tabs .nav-link {
        white-space: nowrap !important;
        font-size: 16px !important;
        padding: 10px 4px !important;
        flex: 0 0 auto !important;
    }

    .custom-spec-card {
        padding: 24px 15px !important;
        border-radius: 16px !important;
    }

    .woocommerce-tabs table.shop_attributes th,
    .woocommerce-tabs table.shop_attributes td {
        font-size: 15px !important;
    }

    /* --- 4. Related Products Grid --- */
    .related.products {
        padding: 40px 15px !important;
    }

    .related.products h1.newarrivals {
        font-size: 28px !important;
    }

    .related.products ul.products {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .related.products ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- 5. Related Products Card Buttons (Add to cart & Eye) --- */
    .button-group-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .woocommerce ul.products li.product a.custom-quick-view-circle,
    .related.products ul.products li.product .custom-quick-view-circle {
        position: static !important;
        bottom: auto !important;
        right: auto !important;
        width: 45px !important;
        height: 45px !important;
        flex: 0 0 45px !important;
        margin: 0 !important;
    }

    .woocommerce ul.products li.product a.button.custom-cart-btn,
    .related.products ul.products li.product .custom-cart-btn {
        position: static !important;
        flex: 1 1 auto !important;
        width: auto !important;
        margin: 0 !important;
        font-size: 14px !important;
        padding: 12px 10px !important;
        white-space: nowrap !important;
    }

    /* --- 6. Reviews & Comments --- */
    .woocommerce #reviews #comments ol.commentlist li .comment-text {
        margin: 0 0 20px 0 !important;
        padding: 20px !important;
        border-radius: 20px !important;
    }

    .woocommerce #review_form #respond {
        padding: 20px 15px !important;
        border-radius: 20px !important;
    }

    input#submit {
        width: 100% !important;
        padding: 15px !important;
    }
}


/* ===== EXTRA SMALL PHONES (≤ 360px) ===== */
@media (max-width: 360px) {

    /* Extra safety for very tiny phones (like the iPhone SE) */
    .custom-product-actions .action-btn {
        font-size: 12px;
        padding: 10px 4px;
    }
}



/* =======================================================
   Single Product Page End
   ======================================================= */
/* =======================================================
   MAIN LAYOUT & STICKY CONFIGURATION
   ======================================================= */

.wc-block-components-sidebar-layout.wc-block-cart {
    padding-top: 0;
    justify-content: center;
    gap: 36px;
    align-items: flex-start !important;
    /* CRITICAL: Allows the right sidebar to be sticky */
    display: flex;
    flex-wrap: wrap;
}

/* =======================================================
   LEFT COLUMN - CART ITEMS & BLUE HEADER
   ======================================================= */

.wp-block-woocommerce-cart-items-block {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    padding: 0 !important;
    /* Removed padding so blue header touches edges */
    margin-bottom: 20px;
    overflow: hidden;
    width: 54% !important;
}

/* Inject the Dark Blue Header */
.wp-block-woocommerce-cart-items-block::before {
    content: "🛒 Your Cart";
    display: block;
    background: linear-gradient(to right, #0a2540, #1e5a8e) !important;
    color: #ffffff;
    font-size: 30px;
    font-weight: 800;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 24px 32px;
    margin-bottom: 32px;
}

/* Reset Default Table Settings */
.wc-block-cart-items,
.wc-block-cart-items tbody {
    display: flex !important;
    flex-direction: column;
    gap: 20px;
    border: none !important;
    background: transparent !important;
    padding: 0 32px 32px 32px !important;
    /* Padding for the items below header */
}

.wc-block-cart-items thead,
.screen-reader-text {
    display: none !important;
}

/* Individual Product Row (Inner Cards) */
.wc-block-cart-items__row {
    display: flex !important;
    flex-direction: row;
    margin-bottom: 24px;
    gap: 28px;
    align-items: center;
    background: #ffffff;
    border: 1px solid #ebe6e7;
    border-radius: 12px;
    padding: 24px;
    position: relative;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.wc-block-cart-items__row:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-color: #d1d5db;
}

.wc-block-cart-items__row td {
    border: none !important;
    padding: 0 !important;
    display: block;
}

/* Product Image Column */
.wc-block-cart-item__image {
    width: 130px !important;
    flex-shrink: 0;
    margin-right: 25px;
}

.wc-block-cart-item__image img {
    width: 130px !important;
    height: 130px !important;
    object-fit: cover;
    border-radius: 10px;
    border: 4px solid #ffd7a8;
    transition: border-color 0.2s ease-in-out;
}

.wc-block-cart-item__image img:hover {
    border-color: #ff6000 !important;
}

/* Middle Column (Title & Description) */
.wc-block-cart-item__product {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100px;
}

.wc-block-cart-item__wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wc-block-components-product-name {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 20px !important;
    font-weight: 900;
    letter-spacing: 0.8px;
    color: #0a2540 !important;
    text-decoration: none !important;
    line-height: 1.2;
    margin-bottom: 0 !important;
}

.wc-block-components-product-name:hover {
    color: #ff6900 !important;
}

.wc-block-components-product-metadata {
    display: block !important;
    margin-top: 8px;
}

.wc-block-components-product-metadata__description p {
    color: #6b7280 !important;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    max-width: 90%;
}

.wc-block-components-product-details {
    display: none !important;
}

/* Quantity Controls */
.wc-block-cart-item__quantity {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: auto;
    padding-top: 15px;
}

.wc-block-components-quantity-selector {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    height: 43px;
    width: 156px;
    overflow: hidden;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #111;
    cursor: pointer;
    font-size: 22px;
    font-weight: 400;
    margin: 0;
    min-width: 48px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    padding: 0;
    transition: all 0.2s ease-in-out;
}

.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
    appearance: textfield;
    background: #fff !important;
    border: 0;
    border-left: 1px solid #e5e7eb !important;
    border-right: 1px solid #e5e7eb !important;
    box-shadow: none;
    color: #0a2540;
    flex: 1 1 auto;
    font-size: 16px;
    font-weight: 800;
    height: 100%;
    margin: 0;
    min-width: 57px;
    order: 2;
    padding: 0;
    text-align: center;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover:not([disabled]) {
    background-color: #ff6000 !important;
    color: #ffffff !important;
}

.wc-block-components-quantity-selector__input:focus {
    outline: none;
}

.wc-block-components-quantity-selector__input::-webkit-inner-spin-button,
.wc-block-components-quantity-selector__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove Link */
.wc-block-cart-item__remove-link {
    background: transparent !important;
    border: none !important;
    display: contents !important;
    align-items: center;
    color: #e7000b !important;
    font-size: 16px;
    font-weight: 800 !important;
    cursor: pointer;
    padding: 0;
    gap: 6px;
}

.wc-block-cart-item__remove-link:hover {
    color: firebrick !important;
}

.wc-block-cart-item__remove-link svg {
    width: 20px;
    height: 20px;
    fill: #e60000;
}

.wc-block-cart-item__remove-link::after {
    content: "Remove";
    font-size: 16px;
    font-weight: 600;
}

/* Right Column of the Inner Card (Prices) */
.wc-block-cart-item__total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: flex-start;
    padding-top: 0;
}

.wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-product-price__value {
    color: #ff6000 !important;
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 4px !important;
    line-height: 1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.wc-block-components-sale-badge {
    display: none !important;
}

.wc-block-cart-item__prices {
    position: absolute;
    right: 20px;
    top: 48px;
    text-align: right;
}

.wc-block-cart-item__prices del {
    display: none !important;
}

.wc-block-cart-item__prices .wc-block-components-product-price__value {
    text-decoration: none !important;
    color: #7a8b9a !important;
    font-size: 15px;
    margin-top: 15px;
    font-weight: 400;
    background: transparent !important;
}

.wc-block-cart-item__prices .wc-block-components-product-price__value::after {
    content: " each";
}

/* =======================================================
   RIGHT COLUMN - ORDER SUMMARY (STICKY)
   ======================================================= */

.wp-block-woocommerce-cart-totals-block {
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    border: none !important;
    width: 26% !important;
    padding: 0 !important;
    overflow: hidden !important;

    /* Sticky Behavior */
    position: sticky !important;
    top: 40px !important;
    height: max-content !important;
    align-self: flex-start;
}

/* Orange Header Block */
.wc-block-cart__totals-title {
    background: linear-gradient(to top right, #ff6900, #f54a00) !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 30px 25px !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    text-transform: capitalize !important;
    border: none !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.wp-block-woocommerce-cart-order-summary-coupon-form-block,
.wc-block-components-totals-wrapper,
.wc-block-cart__submit {
    padding-left: 25px !important;
    padding-right: 25px !important;
}

/* Coupon Input & Button */
.wc-block-components-totals-coupon__form {
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 15px !important;
    width: 100% !important;
}

.wc-block-components-totals-coupon__input {
    flex-grow: 1 !important;
    margin: 0 !important;
}

.wc-block-components-totals-coupon__input input {
    width: 100% !important;
    height: 50px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 0 15px !important;
    font-size: 16px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.wc-block-components-totals-coupon__form button,
.wc-block-components-totals-coupon__button {
    background: linear-gradient(to right, #00b8db, #00bba7) !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 0 15px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    /* Increased slightly for better legibility */
    border: none !important;
    height: 50px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity 0.2s ease !important;
}

.wc-block-components-totals-coupon__form button:hover {
    opacity: 0.9 !important;
    background: #00c2cb !important;
}

/* Totals Text Styles */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-weight: 700;
    font-size: 24px !important;
    color: #0a2540;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-weight: 700;
    font-size: 36px !important;
    color: #ff6900;
}

/* Checkout Button */
.wc-block-cart__submit-button {
    background: linear-gradient(to right, #ff6900, #f54a00) !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 15px 32px !important;
    /* Adjusted padding for better height */
    margin-bottom: 25px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s ease !important;
}

.wc-block-cart__submit-button:hover {
    transform: scale(1.04) !important;
    background-color: #e64e00 !important;
}

.wc-block-cart__submit-button::after {
    content: "\2192" !important;
    margin-left: 10px !important;
    font-size: 24px !important;
    transition: transform 0.2s ease !important;
}

.wc-block-cart__submit-button:hover::after {
    transform: translateX(6px) !important;
}

/* =======================================================
   RESPONSIVE DESIGN (TABLETS & MOBILE)
   ======================================================= */

/* 1. TABLET & IPAD (Screens between 768px and 1024px) */
@media screen and (max-width: 1024px) {

    /* Stack the main Left Cart and Right Summary columns */
    .wc-block-components-sidebar-layout.wc-block-cart {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 24px !important;
        padding: 15px !important;
    }

    /* Make both blocks take up full width of the screen */
    .wp-block-woocommerce-cart-items-block,
    .wp-block-woocommerce-cart-totals-block {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Disable Sticky Summary so it stops overlapping */
    .wp-block-woocommerce-cart-totals-block {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        margin-top: 10px !important;
    }

    /* --- THE FIX: CSS GRID FOR PERFECT TABLET ROWS --- */
    .wc-block-cart-items__row {
        display: grid !important;
        grid-template-columns: 100px 1fr auto !important;
        /* 1: Image | 2: Middle Content | 3: Prices */
        grid-template-rows: auto auto !important;
        /* Two rows inside the grid */
        gap: 15px 20px !important;
        padding: 24px 20px !important;
        align-items: center !important;
        position: relative !important;
    }

    /* Column 1: Image (Spans both rows to stay perfectly centered left) */
    .wc-block-cart-item__image {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        width: 100px !important;
        margin: 0 !important;
    }

    .wc-block-cart-item__image img {
        width: 100px !important;
        height: 100px !important;
    }

    /* Column 2, Row 1: Title locked to top middle */
    .wc-block-cart-item__product {
        grid-column: 2 !important;
        grid-row: 1 !important;
        text-align: left !important;
        min-height: auto !important;
        padding-top: 5px !important;
    }

    /* Column 2, Row 2: Quantity & Remove locked to bottom middle */
    .wc-block-cart-item__quantity {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: flex !important;
        flex-direction: row !important;
        /* Keeps pill and remove side-by-side */
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 20px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .wc-block-cart-item__remove-link {
        justify-content: flex-start !important;
    }

    /* Column 3, Row 1: Total Price locked to top right */
    .wc-block-cart-item__total {
        grid-column: 3 !important;
        grid-row: 1 !important;
        align-items: flex-end !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Absolute position the smaller "each" price neatly under the total price */
    .wc-block-cart-item__prices {
        position: absolute !important;
        right: 20px !important;
        top: 65px !important;
        /* Adjust this slightly if it's too close/far from the big orange price */
        text-align: right !important;
        margin: 0 !important;
    }
}

/* 2. MOBILE PHONES (Screens 767px and below) */
@media screen and (max-width: 767px) {

    /* NUKE WOOCOMMERCE STICKY FOOTER */
    .wc-block-cart .wc-block-cart__submit-container,
    .wc-block-cart .wc-block-cart__submit-container--sticky,
    .wc-block-cart .wc-block-components-totals-wrapper {
        position: relative !important;
        bottom: unset !important;
        left: unset !important;
        right: unset !important;
        padding: 0 !important;
        margin-top: 15px !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        z-index: 1 !important;
        width: 100% !important;
    }

    .wc-block-cart__submit-container::before,
    .wc-block-cart__submit-container::after {
        display: none !important;
    }

    .wc-block-components-sidebar-layout.wc-block-cart {
        padding: 10px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    .wp-block-woocommerce-cart-items-block,
    .wp-block-woocommerce-cart-totals-block {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .wc-block-cart-items {
        padding: 0 15px 15px 15px !important;
    }

    /* FORMAT MOBILE ROWS */
    .wc-block-cart-items__row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 24px 15px !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* REORDER ELEMENTS: 1. Image, 2. Title, 3. Controls, 4. Orange Price, 5. Grey Price */
    .wc-block-cart-item__image {
        order: 1 !important;
        margin: 0 auto 15px auto !important;
    }

    .wc-block-cart-item__product {
        order: 2 !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* QUANTITY & REMOVE IN ONE ROW */
    .wc-block-cart-item__quantity {
        order: 3 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        gap: 15px !important;
        margin: 15px 0 25px 0 !important;
    }

    .wc-block-components-quantity-selector {
        margin: 0 !important;
    }

    .wc-block-cart-item__remove-link {
        justify-content: center !important;
        margin: 0 !important;
    }

    /* ORANGE TOTAL PRICE ON TOP */
    .wc-block-cart-item__total {
        order: 4 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        border-top: 1px solid #ebe6e7 !important;
        padding-top: 20px !important;
        margin-top: 0 !important;
    }

    /* GREY "EACH" PRICE BELOW (Forced Flex Center to prevent drifting) */
    .wc-block-cart-item__prices {
        order: 5 !important;
        position: static !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        border-top: none !important;
        padding-top: 0 !important;
        margin: 5px auto 0 auto !important;
    }

    .wc-block-components-totals-coupon__form {
        flex-direction: column !important;
    }

    .wc-block-components-totals-coupon__form button {
        width: 100% !important;
    }
}

/* =======================================================
   1. EMPTY CART PAGE STYLING
   ======================================================= */

.wp-block-woocommerce-empty-cart-block {
    text-align: center !important;
    padding: 60px 20px !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    margin: 40px auto !important;

}

/* Color the Sad Face Icon Navy Blue */
.wp-block-woocommerce-empty-cart-block svg {
    fill: #0a2540 !important;
    max-width: 100px !important;
    margin-bottom: 20px !important;
}

/* Empty Cart Title */
.wc-block-cart__empty-cart__title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    color: #0a2540 !important;
    margin-bottom: 30px !important;
}

/* The 3 Dots Separator */
.wp-block-separator.is-style-dots {
    border: none !important;
    background: transparent !important;
    height: auto !important;
    text-align: center !important;
    margin: 30px auto !important;
}

.wp-block-separator.is-style-dots::before {
    content: "···" !important;
    color: #ff6900 !important;
    font-size: 60px !important;
    letter-spacing: 15px !important;
}

/* "New in Store" Heading */
.wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title) {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0a2540 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 40px !important;
}

/* =======================================================
   2. REFINED PRODUCT GRID (STARS BETWEEN IMAGE & TITLE)
   ======================================================= */

.wc-block-grid__products {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    list-style: none !important;
    padding: 0 !important;
    justify-content: center !important;
}

/* The Main Card Container */
.wc-block-grid__product {
    background: #ffffff !important;
    border-radius: 15px !important;
    border: 1px solid #ebe6e7 !important;
    padding: 20px !important;
    text-align: center !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    flex: 1 1 250px !important;
    max-width: 300px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

.wc-block-grid__product:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-5px) !important;
}

/* This "unwraps" the a-tag so we can put the stars between the image and title */
.wc-block-grid__product-link {
    display: contents !important;
}

/* 1. IMAGE ON TOP */
.wc-block-grid__product-image {
    order: 1 !important;
    margin-bottom: 15px !important;
}

.wc-block-grid__product-image img {
    border-radius: 10px !important;
    border: 3px solid #ffd7a8 !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* 2. STARS IN THE MIDDLE */
.wc-block-grid__product-rating {
    order: 2 !important;
    margin: 0 auto 10px auto !important;
    color: #ffb400 !important;
}

/* 3. TITLE BELOW STARS */
.wc-block-grid__product-title {
    order: 3 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0a2540 !important;
    margin: 0 0 15px 0 !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
}

/* 4. PRICES (Orange Top, Grey Bottom) */
.wc-block-grid__product-price {
    order: 4 !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    gap: 5px !important;
    margin-bottom: 20px !important;
}

.wc-block-grid__product-price strong {
    display: none !important;
}

.wc-block-grid__product-price ins,
.wc-block-grid__product-price ins span {
    text-decoration: none !important;
    color: #ff6000 !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    background: transparent !important;
}

.wc-block-grid__product-price del,
.wc-block-grid__product-price del span {
    color: #7a8b9a !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
}

/* 5. BUTTON AT THE BOTTOM */
.wp-block-button.wc-block-grid__product-add-to-cart {
    order: 5 !important;
    width: 100% !important;
    margin-top: auto !important;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link {
    background: linear-gradient(to right, #ff6900, #f54a00) !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 14px 20px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    border: none !important;
    width: 100% !important;
    display: inline-block !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

/* --- OVERRIDE WOOCOMMERCE SALE BADGE --- */
.wc-block-grid__product-onsale {
    background: linear-gradient(to right, #ff6900, #f54a00) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    padding: 5px 12px !important;
    border-radius: 50px !important;
    border: none !important;
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    left: auto !important;
    margin: 0 !important;
    line-height: 1 !important;
    z-index: 10 !important;
    width: max-content !important;
}

.wc-block-grid__product-onsale span {
    color: #ffffff !important;
}

/* =======================================================
   3. RESPONSIVE DESIGN (TABLETS & MOBILE)
   ======================================================= */

/* Tablets and Small Laptops (Screens 1024px and below) */
@media screen and (max-width: 1024px) {
    .wc-block-grid__product {
        flex: 1 1 45% !important;
        /* Allow 2 cards per row on tablets */
        max-width: 45% !important;
    }
}

/* Mobile Phones (Screens 768px and below) */
@media screen and (max-width: 768px) {

    /* Shrink the main empty cart container padding */
    .wp-block-woocommerce-empty-cart-block {
        padding: 40px 15px !important;
        margin: 20px 15px !important;
    }

    /* Scale down the typography for small screens */
    .wc-block-cart__empty-cart__title {
        font-size: 26px !important;
        margin-bottom: 20px !important;
    }

    .wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title) {
        font-size: 20px !important;
        margin-bottom: 30px !important;
    }

    /* Shrink the orange dots */
    .wp-block-separator.is-style-dots::before {
        font-size: 50px !important;
        letter-spacing: 10px !important;
    }

    /* Force the product grid to stack into 1 single column */
    .wc-block-grid__products {
        gap: 20px !important;
    }

    .wc-block-grid__product {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        /* Take up the full width of the phone screen */
        padding: 20px 15px !important;
    }

    /* Restrict the image size so it doesn't get massively stretched on wide phones */
    .wc-block-grid__product-image img {
        max-width: 250px !important;
        margin: 0 auto !important;
        display: block !important;
    }
}



/**************************Checkout Page**************************/

/* 1. Background and Layout Container */
.wc-block-checkout {
    background-color: #f8fafc; /* Slightly softer background */
    padding: 40px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* 2. Card Styling (Billing, Shipping, Payment) */
.wc-block-components-checkout-step {
    background: #ffffff !important;
    border-radius: 36px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    padding: 32px !important;
    margin-bottom: 24px !important;
}

/* 3. Headers and Inline Colored Icons */
.wc-block-components-checkout-step__heading {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

.wc-block-components-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1a2b3c !important;
    margin: 0 !important;
}

/* --- BASE ICON SETUP (Applies to all steps) --- */
.wc-block-components-checkout-step__heading::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 17px !important;
    flex-shrink: 0;
    color: #ffffff !important;
    font-size: 20px !important;
}

/* --- 1. CONTACT INFO ICON (User Profile) --- */
#contact-fields .wc-block-components-checkout-step__heading::before {
    content: "\f007" !important;
    background: linear-gradient(135deg, #ff6900 0%, #f54a00 100%) !important;
}

/* --- 2. BILLING/SHIPPING ADDRESS ICON (Map Pin) --- */
#billing-fields .wc-block-components-checkout-step__heading::before,
#shipping-fields .wc-block-components-checkout-step__heading::before {
    content: "\f041" !important;
    background: linear-gradient(135deg, #00b8db 0%, #00bba7 100%) !important;
}

/* --- 3. PAYMENT OPTIONS ICON (Credit Card) --- */
#payment-method .wc-block-components-checkout-step__heading::before {
    content: "\f09d" !important;
    background: linear-gradient(135deg, #2b7fff 0%, #155dfc 100%) !important;
}

/* Hide default Woocommerce step numbers to prevent duplicates */
.wc-block-components-checkout-step__heading-content {
    display: none !important;
}

/* 4. Form Inputs Styling (Targeting the actual inputs) */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-address-form select.wc-blocks-components-select__select {
    border-radius: 12px !important;
    border: 1px solid #ebe6e7 !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    padding-top: 24px !important;
    padding-bottom: 8px !important;
    height: auto !important;
}

.wc-blocks-components-select__label,
.wc-block-components-text-input label {
    font-size: 12px !important;
    top: 6px !important;
    transform: none !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-address-form select.wc-blocks-components-select__select:focus {
    border-color: #ff6b00 !important;
    box-shadow: 0 0 0 1px #ff6b00 !important;
    outline: none !important;
}

.wc-block-components-text-input:focus-within,
.wc-blocks-components-select__container:focus-within {
    border-color: #ff6b00 !important;
    box-shadow: 0 0 0 1px #ff6b00 !important;
}

/* Inside the Action Row */
.wc-block-checkout__actions_row {
    display: flex !important;
    flex-direction: row-reverse;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 0 !important;
    padding-top: 24px !important;
    border-top: 1px solid #ebe6e7 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

/* 1. Place Order Button Hover */
.wc-block-components-checkout-place-order-button {
    background: linear-gradient(135deg, #ff6900 0%, #f54a00 100%) !important;
    color: #ffffff !important;
    border-radius: 42px !important;
    padding: 16px 32px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-transform: none !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.2) !important;
    flex-grow: 1;
    cursor: pointer !important;
    display: flex !important;
    justify-content: center !important;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease !important;
}

.wc-block-components-checkout-place-order-button:hover {
    transform: scale(1.02) !important; /* Reduced scale slightly to prevent overflow on mobile */
    box-shadow: 0 6px 16px rgba(255, 107, 0, 0.4) !important;
    opacity: 0.95 !important;
}

/* 2. Return to Cart Button Hover */
.wc-block-components-checkout-return-to-cart-button {
    background: linear-gradient(135deg, #00b8db 0%, #00bba7 100%) !important;
    color: #ffffff !important;
    border-radius: 42px !important;
    padding: 16px 32px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 184, 219, 0.3) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    transition: transform 0.2s ease-in-out, opacity 0.2s ease, box-shadow 0.2s ease !important;
}

.wc-block-components-checkout-return-to-cart-button:hover {
    transform: scale(1.02) translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(0, 184, 219, 0.4) !important;
    opacity: 0.95 !important;
}

.wc-block-components-checkout-return-to-cart-button svg {
    fill: currentColor;
    left: 9px;
    width: 21px !important;
    height: 20px !important;
    font-size: 50px;
    position: absolute;
    top: 54%;
    transform: translateY(-50%);
}

/* 6. BOTTOM SECTION STITCHING (Payment, Notes, Terms, Button) */
#payment-method {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: none !important;
}

#order-notes {
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    border-left: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
}

.wc-block-checkout__terms {
    background-color: #ffffff !important;
    padding: 18px !important;
    border-left: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
    margin: 0 !important;
}

.wc-block-checkout__actions {
    background-color: #ffffff !important;
    padding: 0 24px 24px 24px !important;
    border: 1px solid #e2e8f0 !important;
    border-top: none !important;
    border-bottom-left-radius: 36px !important; /* Matched step radius */
    border-bottom-right-radius: 36px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 24px !important;
}

/* Sidebar Summary */
.wp-block-woocommerce-checkout-order-summary-block {
    max-width: 450px; /* Keeps it constrained on desktop */
    width: 100%;
    background: #ffffff;
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid #eef0f2;
}

.wc-block-components-checkout-order-summary__title {
    background: linear-gradient(to right, #0a2540 0%, #1e5a8e 100%) !important;
    padding: 24px !important;
    margin: 0 !important;
}

.wc-block-components-checkout-order-summary__title-text {
    color: #ffffff !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    text-transform: capitalize !important;
}

/* Grid Layout for Products */
.wc-block-components-order-summary-item {
    display: grid !important;
    grid-template-columns: 52px 1fr auto !important;
    grid-template-areas:
        "img title price"
        "img qty   price" !important;
    margin-bottom: 20px;
    column-gap: 20px !important;
    row-gap: 4px !important;
    align-items: start !important;
    border: none !important;
}

.wc-block-components-order-summary-item__image {
    display: contents !important;
}

.wc-block-components-order-summary-item__image img {
    grid-area: img !important;
    width: 75px !important;
    height: 60px !important;
    border-radius: 15px !important;
    object-fit: cover !important;
    align-self: start !important;
    max-height: 75px !important;
}

.wc-block-components-order-summary-item__description {
    grid-area: title !important;
    padding: 0 !important;
    align-self: end !important;
}

.wc-block-components-product-name {
    font-size: 14px !important;
    color: #1a2b40 !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    max-width: 200px;
}

.wc-block-components-order-summary-item__quantity {
    grid-area: qty !important;
    align-self: start !important;
    position: static !important;
    display: block !important;
    background: transparent !important;
    color: #8c97a8 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
}

.wc-block-components-order-summary-item__quantity span[aria-hidden="true"]::before {
    content: "Qty: ";
}

.wc-block-components-order-summary-item__total-price {
    grid-area: price !important;
    align-self: start !important;
    margin: 0 !important;
}

.wc-block-formatted-money-amount.wc-block-components-product-price__value {
    color: #ff7a21 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-cart-items-block.wc-block-components-totals-wrapper {
    border-top: 0;
    padding-top: 27px;
}

.wc-block-components-product-metadata__description,
.wc-block-components-product-details,
del.wc-block-components-product-price__regular,
.wc-block-components-order-summary-item__individual-price,
.screen-reader-text {
    display: none !important;
}

/* =======================================================
   FINAL UNIVERSAL RESPONSIVE FIX (TABLET & MOBILE)
   ======================================================= */

/* 1. TABLETS & SMALL LAPTOPS (Up to 1024px) */
@media screen and (max-width: 1024px) {
    /* Force Vertical Stack */
    .wc-block-checkout {
        display: flex !important;
        flex-direction: column !important;
        padding: 30px 20px !important; /* Safe padding */
    }

    .wc-block-checkout__main {
        order: 1 !important;
        width: 100% !important;
    }

    .wc-block-checkout__sidebar {
        order: 2 !important;
        width: 100% !important;
        margin-top: 30px !important;
    }

    /* Remove 450px constraint so it matches the form width on tablets/mobile */
    .wp-block-woocommerce-checkout-order-summary-block {
        max-width: 100% !important; 
    }

   /* --- THE DOUBLE SUMMARY KILLER --- */
    /* Hide the plain version Woo injects into the main form */
    .wc-block-checkout__main .wp-block-woocommerce-checkout-order-summary-block,
    .wc-block-checkout__main .wc-block-components-checkout-order-summary-block,
    .wc-block-checkout__main .wc-block-components-order-summary,
    .wc-block-components-checkout-order-summary__toggle {
        display: none !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: hidden !important;
        overflow: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
    }
    
    /* --- THE SQUISH FIX --- */
    .wc-block-components-order-summary-item {
        display: grid !important;
        grid-template-columns: 60px 1fr auto !important;
        column-gap: 15px !important;
        width: 100% !important;
        align-items: center !important;
        border: none !important;
    }

    .wc-block-components-product-name {
        font-size: 14px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        word-break: normal !important;
        display: block !important;
        max-width: 100% !important;
    }

    /* Keep Sidebar Summary Open */
    .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary-block {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* 2. STANDARD MOBILE (Up to 768px) */
@media screen and (max-width: 768px) {
    .wc-block-checkout {
        padding: 20px 15px !important; /* Keeps edges safe on standard phones */
    }

    /* Shrink the massive 32px inner padding to give form inputs more room */
    .wc-block-components-checkout-step {
        padding: 24px 20px !important; 
        border-radius: 24px !important; 
    }
    
    .wc-block-checkout__actions {
        padding: 0 20px 20px 20px !important;
        border-bottom-left-radius: 24px !important;
        border-bottom-right-radius: 24px !important;
    }

    /* Shrink Headings & Icons */
    .wc-block-components-title {
        font-size: 20px !important;
    }

    .wc-block-components-checkout-step__heading::before {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
    }

    /* Button Stack */
    .wc-block-checkout__actions_row {
        flex-direction: column-reverse !important;
        gap: 15px !important;
    }

    .wc-block-components-checkout-place-order-button,
    .wc-block-components-checkout-return-to-cart-button {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* 3. SPECIFIC SMALL PHONE TWEAK (Below 480px) */
@media screen and (max-width: 480px) {
    /* Tighten grid spacing */
    .wc-block-components-order-summary-item {
        grid-template-columns: 50px 1fr auto !important;
        column-gap: 10px !important;
    }

    /* Shrink price font so it doesn't push the title over on tiny screens */
    .wc-block-formatted-money-amount.wc-block-components-product-price__value {
        font-size: 18px !important; 
    }
    
    /* Slightly shrink summary title */
    .wc-block-components-checkout-order-summary__title-text {
        font-size: 22px !important;
    }
}

/*========================MY ACCOUNT========================*/
/* Use a clean sans-serif font to match the design */
.woocommerce-account {
    background-color: #fff; 
    box-sizing: border-box;
    overflow-x: hidden; /* Prevents accidental horizontal scrolling */
}

/* --- Hide Default Theme Text ONLY on the Dashboard --- */
.woocommerce:has(.woocommerce-MyAccount-navigation-link--dashboard.is-active) .woocommerce-MyAccount-content > p {
    display: none !important;
}

/* --- 1. Main Dashboard Layout --- */
.woocommerce-account .woocommerce {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    max-width: 1150px; 
    margin: 0 auto;
}

.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1;
    width: 100%;
    min-width: 0; 
}

/* --- 2. Sidebar Profile & Navigation Wrapper --- */
.custom-sidebar-wrapper {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px 20px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
    flex: 0 0 300px; 
    width: 300px;    
    box-sizing: border-box;
    
    /* Sticky Sidebar Code */
    position: -webkit-sticky; 
    position: sticky;
    top: 40px; 
    z-index: 10;
}

/* Strip background from default Woo nav */
.woocommerce-account .woocommerce-MyAccount-navigation {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    flex: none;
    width: 100%;
}

/* Profile Card */
.user-profile-card {
    text-align: center;
    margin-bottom: 20px;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #ff7a00, #ff5e00); 
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar .dashicons {
    color: white;
    font-size: 32px;
    width: 32px;
    height: 32px;
}

.profile-name {
    font-size: 18px;
    font-weight: 800;
    color: #001d3d;
    margin: 0 0 4px 0;
}

.profile-email {
    font-size: 12px;
    color: #94a3b8;
    margin: 0 0 20px 0;
    word-break: break-all;
}

.profile-sep {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin-bottom: 15px;
}

/* Navigation Links */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: flex;
    align-items: center;
    padding: 12px 18px !important;
    color: #001d3d;
    font-weight: 700;
    font-size: 16px !important;
    border-radius: 12px;
    margin-bottom: 5px;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Hover effect for inactive menu items */
.woocommerce-account .woocommerce-MyAccount-navigation li:not(.is-active) a:hover {
    background-color: #ffeedc !important; 
    color: #001d3d !important;
}

/* Active Menu Item with Gradient */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: linear-gradient(90deg, #ff7a00, #ff5e00) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 94, 0, 0.2); 
}

.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
    font-family: "dashicons";
    font-size: 18px;
    margin-right: 12px;
    opacity: 0.8;
}

/* Logout Button Special Styling */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
    color: #ef4444 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    background-color: #fee2e2 !important; 
}

/* --- 3. Welcome Header --- */
.welcome-msg {
    font-size: 26px;
    font-weight: 900;
    color: #001d3d;
    margin-top: 0;
    margin-bottom: 25px;
}

.welcome-msg .orange-text {
    color: #ff5e00;
}

/* --- 4. Real-Time Stat Cards --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    padding: 24px;
    width: 100%;
    border-radius: 16px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    height: 168px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.stat-card .dashicons {
    font-size: 40px;
    margin-bottom: 20px; 
    width: 26px;
    height: 26px;
    opacity: 0.9;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-num {
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-desc {
    font-size: 16px;
    font-weight: 600;
    opacity: 0.9;
}

/* Card Colors with Gradients */
.stat-card.orange { background: linear-gradient(135deg, #ff7a00, #ff5e00); }
.stat-card.teal   { background: linear-gradient(135deg, #00d2c2, #00b4a6); }
.stat-card.blue   { background: linear-gradient(135deg, #3b76ff, #2563eb); }

/* --- 5. Recent Orders Section --- */
.recent-orders-title {
    font-size: 18px;
    font-weight: 800;
    color: #001d3d;
    margin: 0;
    padding: 25px 30px 10px 30px;
    background: #fff;
    border-radius: 20px 20px 0 0;
}

.recent-orders-wrapper {
    background: #fff;
    padding: 10px 30px 30px 30px;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

.woocommerce-account table.shop_table_my_account {
    border-collapse: collapse;
    width: 100%;
    margin: 0;
}

.woocommerce-account table.shop_table_my_account thead {
    display: none;
}

.woocommerce-account table.shop_table_my_account tbody {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.woocommerce-account table.shop_table_my_account tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: 
        "number total"
        "date status";
    padding: 20px 25px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    align-items: center;
}

.woocommerce-account table.shop_table_my_account td.woocommerce-orders-table__cell-order-number {
    grid-area: number;
    border: none;
    padding: 0;
    text-align: left;
}

.woocommerce-account table.shop_table_my_account td.woocommerce-orders-table__cell-order-number a {
    font-weight: 800;
    color: #001d3d;
    text-decoration: none;
    font-size: 15px;
}

.woocommerce-account table.shop_table_my_account td.woocommerce-orders-table__cell-order-date {
    grid-area: date;
    font-size: 12px;
    color: #94a3b8;
    border: none;
    padding: 0;
    margin-top: 6px;
    text-align: left;
}

.woocommerce-account table.shop_table_my_account td.woocommerce-orders-table__cell-order-total {
    grid-area: total;
    border: none;
    padding: 0;
    text-align: right;
    font-size: 12px;
    color: #94a3b8;
}

.woocommerce-account table.shop_table_my_account td.woocommerce-orders-table__cell-order-total .woocommerce-Price-amount {
    font-weight: 800;
    font-size: 20px;
    color: #ff5e00;
    display: block;
}

.woocommerce-account table.shop_table_my_account td.woocommerce-orders-table__cell-order-status {
    grid-area: status;
    border: none;
    padding: 0;
    text-align: right;
    margin-top: 6px;
    display: flex;
    justify-content: flex-end;
}

.woocommerce-account .status-completed,
.woocommerce-account mark.completed,
.woocommerce-account mark.delivered {
    background: #dcfce7 !important;
    color: #16a34a !important;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 20px;
    display: inline-block;
}

.woocommerce-account .status-processing,
.woocommerce-account mark.processing {
    background: #fef3c7 !important;
    color: #d97706 !important;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 20px;
    display: inline-block;
}

.woocommerce-account table.shop_table_my_account td.woocommerce-orders-table__cell-order-actions {
    display: none;
}

.view-all-btn-wrapper {
    text-align: center;
    margin-top: 25px;
}

.view-all-btn {
    background: linear-gradient(90deg, #ff7a00, #ff5e00);
    color: white;
    padding: 10px 28px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.view-all-btn:hover {
    box-shadow: 0 4px 12px rgba(255, 94, 0, 0.3);
    color: white;
}


/* --- 6. ADVANCED RESPONSIVENESS --- */

/* TABLETS (Under 991px) */
@media screen and (max-width: 991px) {
    .woocommerce-account .woocommerce {
        flex-direction: column;
        padding: 0 20px; /* Adds safe edge padding internally for tablets */
    }
    .custom-sidebar-wrapper {
        width: 100%;
        flex: auto;
        position: relative;
        top: 0;
        z-index: 1;
    }
}

/* STANDARD MOBILE (Under 768px) */
@media screen and (max-width: 768px) {
    .woocommerce-account .woocommerce {
        padding: 0 15px; /* Safely pads the inner content so cards NEVER touch the edges */
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 15px; 
    }

    /* Make stat cards horizontal & compact on mobile to save vertical space */
    .stat-card {
        height: auto;
        padding: 18px 20px;
        flex-direction: row; 
        align-items: center;
    }
    .stat-card .dashicons {
        font-size: 32px;
        width: 32px;
        height: 32px;
        margin-bottom: 0; 
        margin-right: 20px; /* Pushes text to the right */
    }
    .stat-content {
        align-items: flex-start;
    }
    .stat-num {
        font-size: 26px;
        margin-bottom: 2px;
    }
    .stat-desc {
        font-size: 14px;
    }

    /* Adjust order boxes for smaller screens */
    .recent-orders-title {
        padding: 20px 20px 10px 20px;
    }
    .recent-orders-wrapper {
        padding: 10px 20px 20px 20px;
    }
    
    .woocommerce-account table.shop_table_my_account tbody tr {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "number"
            "date"
            "total"
            "status";
        padding: 15px;
        gap: 5px; 
    }
    .woocommerce-account table.shop_table_my_account td {
        text-align: left !important;
        justify-content: flex-start !important;
    }
    .woocommerce-account table.shop_table_my_account td.woocommerce-orders-table__cell-order-status {
        justify-content: flex-start !important;
        margin-top: 8px;
    }
    .woocommerce-account table.shop_table_my_account td.woocommerce-orders-table__cell-order-total .woocommerce-Price-amount {
        display: inline-block;
        margin-top: 5px;
    }
}