/**
* Template Name: Altai Finance
* Updated: July 09 2025
* Author: The Eclick Team
* License: https://www.eclicksoftwares.com/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://www.eclicksoftwares.com/
--------------------------------------------------------------*/
@import url(../css/fontawesome.min.css);
/* Fonts */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root {
        --default-font: "Roboto", sans-serif;
        --nav-font: "Roboto Condensed", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
        --white-color: #FFFFFF;
        /* button Background color */
        --button-background-color: #8C368D;
        /* button Background color Light */
        --button-light-background-color: #F4C900;
        /* button Background color Dark */
        --button-dark-background-color: #004aad;
        /* website light Background color  */
        --light-background-color: #EFEFEF;
        /* website light Background color  */
        --dark-background-color: #8C368D;
        /* website dark Background color  */
        --very-dark-background-color: #661E67;
        /* website dark Background color  */
        --nav-light-background-color: #F0F0F0;
        /* website very dark Background color  */
        --very-light-background-color: #0AA24D;
        /* website very light Background color  */
        /* website very dark Background color  */
        --border-color: #CFCFCF;
        /* light border color  */
        --dark-border-color: #909090;
        /* dark border color  */
        --default-color: #444444;
        /* Default color used for the majority of the text content across the entire website */
        --heading-color: #2a2c39;
        /* Color for headings, subheadings and title throughout the website */
        --accent-color: #000000;
        /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
        --surface-color: #ffffff;
        /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
        --contrast-color: #312f2f;
        /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
        --white-color: #fff;
        --nav-hover-color: #023375; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
        --nav-color: #474747;
        /* The default color of the main navmenu links */
        /* Applied to main navmenu links when they are hovered over or active */
        --nav-mobile-background-color: #FFFFFF;
        /* Used as the background color for mobile navigation menu */
        --nav-dropdown-background-color: #FFFFFF;
        /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
        --nav-dropdown-color: #FFFFFF;
        /* Used for navigation links of the dropdown items in the navigation menu. */
        --nav-dropdown-hover-color: #FFFFFF;
}


/* Smooth scroll */
:root {
        scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
.container{
         max-width: 1260px !important;
}
p{
        font-size: 1.25rem;
}
body {
        color: var(--default-color);
        background-color: var(--background-color);
        font-family: var(--default-font);
        scroll-behavior: smooth;
}

a {
        color: var(--default-color);
        text-decoration: none;
        transition: 0.3s;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
        color: var(--heading-color);
        font-family: var(--heading-font);
        padding: 0;
        margin: 0;
}

figure {
        padding: 0;
        margin: 0;
}

img {
        max-width: 100%;
        height: auto;
}

.container {
        max-width: 1140px;
}


/* ===== header menu and logo ====== */
.headerSection.darkHeader{
        background-color: #092047;
        padding: 10px 0;
        transition: 0.3s;
}
.headerSection{
        padding: 20px 0 0  0;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        z-index: 999;
        transition: 0.3s;
}
.headerSection .custom-logo{
        max-width: 100%;
        transition: 0.3s;
}
.headerSection.darkHeader .custom-logo{
        max-width: 70%;
        transition: 0.3s;
}
.headerSection .container{
        display: flex;
        align-items: center;
        justify-content: space-between;
}
header#masthead .headerSection figure{
         display: flex;
         justify-content: center;
}
header#masthead .menu-header-menu-container{
        padding: 20px 0 20px 0;
}
header#masthead .menu-header-menu-container ul{ 
        display: flex;
        justify-content: center;
}
header#masthead .menu-header-menu-container ul li{
        padding: 0;
        margin: 0;
}
header#masthead .menu-header-menu-container ul li a{
        padding: 0 13px;
        margin: 0;
        font: 600 15px var(--nav-font);
        line-height: 1.1;
        color:var(--white-color);
        text-transform: uppercase;
}
header#masthead .menu-header-menu-container ul li a:hover,
header#masthead .menu-header-menu-container ul li.current-menu-item a
{
        color: #acf546;
}
header#masthead .toggleMenu,
header#masthead .menu-header-menu-container span .toggleClose{
        display: none;
}
/* ===== header menu and logo end====== */
/* ===== home slider sction ====== */
.video-container {
        position: relative;
        top: 0;
        bottom: 0;
        width: 100%;
        height: auto; 
        overflow: hidden;
}
.video-container figure img{
        width: 100%;
        height: 100%;
}
.video-container video {
        width: 100%; 
        height: 100%;
        object-fit: cover;
}
.heroBannerSection{
        position: relative;
        padding: 0;
        margin: 0;
        height: auto;
}
/* .heroBannerSection .container{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 15%;
        display: flex;
        align-items: center;
        z-index: 99;
} */
 .heroBannerSection .container {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 15%;
        display: flex;
        align-items: center;
        z-index: 99;
        max-width: 1920px !important;
        padding: 0 70px;
}
.heroBannerSection .container h1{
        max-width: 1000px;
        /* margin: 0 auto; */
        font: 600 60px var(--nav-font);
        line-height: 1.1;
        color: #FFFF00;
        text-transform: uppercase;
        text-align: left;
        padding: 0 0 0 40px;
}
.heroBannerSection .container h1 strong{
        color: #FFFF00;
        font-weight: 700;
}
.heroBannerSection .container h1 p{
        padding: 0;
        margin: 0;
}
.innerBannerSection{
        position: relative;
        height: 70vh;
}
.innerBannerSection .container{
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
}
.innerBannerSection:before{
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.7);
        content: "";
}
.innerBannerSection .container h1{
        font: 300 70px var(--nav-font);
        line-height: 1.1;
        color: var(--white-color);
        text-transform: uppercase;
        text-align: center;
}
.innerBannerSection .container h1 span{
        display: block;
        font-size: 30px;
        color: #acf546;
        font-weight: 700;
        text-transform: none;
}
.innerBannerSection figure{
        width: 100%;
        height: 100%;
}
.innerBannerSection figure img{
        width: 100%;
        height: 100%;
        object-fit: cover;
}
/* ===== home slider sction end====== */

/* ===== About Section ====== */
.aboutSection{
        padding: 100px 0 50px 0;
}
.aboutSection .row{
        align-items: center;
}
.aboutSection article {
         margin: -50px 0 0 0;
         padding: 0 0 0 30px;
}
.aboutSection article h2{
       display: block;
       font: 300 70px var(--nav-font);
       line-height: 1.1;
       color:var(--heading-color);
       padding: 0 0 30px 0;
       max-width: 400px;
}
.aboutSection article h2 strong{
        color: var(--accent-color);
        font-weight: 700;
}
.aboutSection article h3{
       display: block;
       font: 600 35px var(--nav-font);
       line-height: 1.1;
       color:var(--heading-color);
       padding: 0 0 20px 0;
}
.buttongroup{
     margin: 0 0 0 0;   
}
.buttongroup a{
        display: inline-block;
        font: 700 14px var(--default-font);
        line-height: 1.3;
        color:var(--white-color);
        padding: 15px 40px;
        border-radius: 30px;
        margin: 15px 0 0 0;
        background-color: var(--accent-color);
        transition: 0.3s;
}
.buttongroup a:hover{
        background-color: #092047;
        transition: 0.3s;
}

/* ===== About Section ====== */

/* ===== blog Section ====== */
.blogSection{
        padding: 100px 0;
       background-color: #efefef;
}
.blogSection article {
        margin: 0 0 40px 0;
        border-radius: 15px;
        padding: 10px;
        background-color: var(--white-color);
        transition: 0.3s;
}
.blogSection article:hover{
        background-color: #F9F9E1;
        transition: 0.3s;
}
.blogSection article figure{
        height: 300px;
        overflow: hidden;
        border-radius: 15px;
}
.blogSection article figure img{
        width: 100%;
        height: 100%;
        object-fit: cover;
}
.blogSection article h2{
       display: block;
       font: 400 22px var(--nav-font);
       line-height: 1.4;
       color:var(--accent-color);
       padding: 25px 0 10px 0;  
}
.blogSection article h2 a{
        color:var(--accent-color);
}
.blogSection article h2 em{
        overflow: hidden;
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-style: normal;
}
.blogSection article h2 span{
        font-size: 16px;
        color: var(--default-color);
        display: block;
        margin: 0 0 5px 0;
}
.blogSection article aside{
        padding: 0 20px 30px 20px;
        font-size: 1.1rem;
}
.blogSection .titleTag,
.guaranteeSection .titleTag,
.faqSection .titleTag
{
       font: 400 40px var(--nav-font);
       line-height: 1.1;
       color:var(--heading-color);
       padding: 0 0 20px 0;
       text-align: center;
       text-transform: uppercase;
}
.blogSection .titleTag strong,
.guaranteeSection .titleTag strong,
.faqSection .titleTag strong
{
        color: var(--accent-color);
        font-weight: 700;
}
.blogSection .desc,
.guaranteeSection .desc,
.faqSection .desc
{
       font: 300 25px var(--default-font);
       line-height: 1.3;
       color:var(--default-color);
       padding: 0 0 50px 0;
       text-align: center;
       max-width:700px;
       margin: 0 auto;
}
.moreButton a{
        display: inline-block;
        font: 400 17px var(--default-font);
        line-height: 1.3;
        color:var(--accent-color);
        padding: 0 0;
        border-radius: 30px;
        margin: 15px 0 0 0;
}

/* ===== blog Section end====== */
/* ===== Guarantee Section ====== */
.guaranteeSection{
        padding: 80px 0;
}
.guaranteeSection h2{
        font: 400 55px var(--nav-font);
        line-height: 1.1;
        color: var(--heading-color);
        padding: 0 0 20px 0;
        text-align: center;
}
/* .videoSection{
        background-color: #efefef;
        overflow: hidden;
        padding: 0;
        width: 400px;
        height: 400px;
        overflow: hidden;
        border-radius: 50%;
} */
.videoSection {
        background-color:transparent;
        overflow: hidden;
        padding: 0;
        width: 600px;
        height: 450px;
        border-radius: 0;
}
.videoSection video{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 15px;
}
/* ===== Guarantee Section end====== */
/* ===== faqs list section  ====== */
.faqSection{
        padding: 0 0;
        background-color:transparent;
        
}
.mainsection .faqSection{
        border-radius: 15px;
}
.faqSection figure{
        overflow: hidden;
        border-radius: 15px;
}
.faqSection ul.listsec{
        padding: 0;
        margin: 0 auto;
        max-width: 100%;
}
.faqSection ul.listsec > li{
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        border-bottom: 1px solid #ccc;
}
.faqSection ul.listsec.last05 > li:nth-last-child(-n+5) {
    display: none;
}
.faqSection ul.listsec > li .answer{
        display: none;
        padding: 0 0 0 0;
        font-style: italic;
}
.faqSection ul.listsec > li .quaction{
        font: 700 22px var(--default-font);
        line-height: 1.7;
        color: #ff0000;
        position: relative;
        cursor: pointer;
        padding: 15px 40px 15px 0;
        font-style: italic;
}
.faqSection ul.listsec > li .quaction.opensection{
        color: #ff0000;
}
.faqSection ul.listsec > li .quaction:after{
        position: absolute;
        right: 0;
        top: 15px;
        content: "+";
        font-size: 24px;
        color: #ff0000;
}
.faqSection ul.listsec > li .quaction.opensection:after{
        position: absolute;
        right: 0;
        top: 5px;
        content: "-";
        font-size: 30px;
        color: #ff0000;
}
.faqSection ul.listsec ul{
        list-style-type: disc;
        margin: 0 0 20px 20px;
}
.faqSection ul.listsec ul li{
        font-size: 1.25rem;
}
/* ===== faqs list section end====== */

/* ===== footer section ====== */
footer.site-footer{
        background: url('../images/banneritgoeson.png') center top no-repeat;
        padding: 50px 0 50px 0;
        text-align: center;
        position: relative;
        background-size: cover;
}
footer.site-footer:after{
        background: rgba(0,0,0,0.8);
        position: absolute;
        inset: 0;
        content: "";
}
footer.site-footer .container{
        position: relative;
        z-index: 99;
}
footer.site-footer .footerMenu ul{
        display: flex;
        justify-content: center;
        gap: 0;
        margin: 20px 0 0 0;
        padding: 0;
}
footer.site-footer .footerMenu ul li:after{
        content: "|";
        margin: 0 15px;
        color: #fff;
}
footer.site-footer .footerMenu ul li:last-child:after{
        content: "";
        margin: 0;
}
footer.site-footer .footerMenu ul li a{
        color: #fff;
}
footer.site-footer .footerMenu ul li a:hover,
footer.site-footer .footerMenu ul li.current-menu-item a
{
        color: #FFFF00;
}
.socialmedialist{
        border-top: 1px solid #575757;
        border-bottom: 1px solid #575757;
        padding: 15px 0;
        margin: 20px auto 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 600px;
        gap: 30px;
}
.socialmedialist li a{
        font-size: 20px;
        color: var(--white-color);
}
.socialmedialist li a:hover{
        color: #FFFF00;
}
.copyright{
        text-align: center;
        padding: 20px 0 0 0;
        color: var(--white-color);
}
/* ===== footer section end====== */
/* ===== inner page ====== */
.mainsection{
        padding: 100px 0 80px 0;
}
.mainsection .mainlist .row {
        align-items: center;
        margin-bottom: 30px;
}
.mainsection .mainlist .row:nth-child(even){
        flex-direction: row-reverse;
}
.mainsection .mainlist h4{
        display: block;
        font: 300 70px var(--nav-font);
        line-height: 1.1;
        color: var(--heading-color);
        padding: 0 0 30px 0;
        max-width: 400px;
}
.mainsection .mainlist h5{
        display: block;
        font: 300 45px var(--nav-font);
        line-height: 1.3;
        color: var(--heading-color);
        padding: 0 0 30px 0;
}
.mainsection .mainlist h4 strong,
.mainsection .mainlist h5 strong
{
        color: var(--accent-color);
        font-weight: 700;
}
.mainsection .mainlist article{
        padding: 0 0 0 20px;
}
.mainsection .mainlist .row:nth-child(even) article{
        padding: 0 20px 0 0;
}
.mainsection .mainlist article  p a{
        color: #000;
        text-decoration: underline;
}
.grid {
  text-align: center;
  max-width: 95vw;
  margin: 2.5vw auto;
}


/* Step 3: how big should the gap be between grid items? remember that the total gap between two items would be double what you set here since both would have that amount set as their individual padding. Also add box-sizing:border-box to make sure the padding doesn't affect the total widh of the item */

.grid-item {
  padding: 5px;
  box-sizing: border-box;
  display:inline;
}
.grid-item a{
        display: block;
        transition-duration: .3s;
}

/* Step 4: Add media queries (subjective) to make the whole grid resposive. */

@media (min-width: 500px) {
  .grid-item {
    width: 50%;
  }
}

@media (min-width: 1000px) {
  .grid-item {
    width: 33.333%;
  }
}

@media (min-width: 1700px) {
  .grid-item {
    width: 25%;
  }
}

@media (min-width: 2100px) {
  .grid-item {
    width: 20%;
  }
}
/* ===== inner page end====== */

.contactInfosection{
        padding: 0 0 0 0;
}
.contactInfo{
        display: grid;
        justify-content: space-between;
        margin: 0 auto;
        grid-template-columns: 33% 33% 33%;
        max-width: 900px;
}
.contactInfo aside figure{
        font-size: 33px;
        width: 100px;
        height: 100px;
        background-color: var(--light-background-color);
        border-radius: 50%;
        margin: 0 auto 30px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 4px solid #eaeaea;
}
.contactInfo aside{
        font-size:17px;
        line-height: 30px;
        text-align:center;
        position: relative;
}
.contactInfo aside .contactAddress{
        padding: 0 32px;
}
.contactInfo aside .openingNote{
        font-size: 12px;
}
.contactFormSection{
        padding: 70px 0;
        margin: 0 0 0 0;
        background: #f2f2f2;
}
.contactFormSection h4{
        font: 500 60px var(--nav-font);
        line-height: 1.3;
        color: var(--default-color);
        padding: 0;
        margin: 0 0 30px 0;
}
.contactFormSection h4 span{
        display: block;
        font-size: 20px;
        color: #4d4d4d;
        font-weight: 400;
}
.contactFormSection form br{
        display: none;
}
.contactFormSection form label {
        display: block;
        margin: 0 0 4px 0;
}
.contactFormSection form label span{
        color: #d91121;
}
.contactFormSection form p {
        padding: 0;
        margin: 0;
}
.contactFormSection form .fromGroup input[type="text"], 
.contactFormSection form .fromGroup input[type="tel"], 
.contactFormSection form .fromGroup input[type="email"] {
        padding: 0 10px;
        margin: 0;
        border: none;
        background: var(--white-color);
        width: 100%;
        height: 50px;
        border-radius: 8px;
        outline: none;
        box-shadow: none;
}
.contactFormSection form .fromGroup {
        margin: 0 0 20px 0;
}
.contactFormSection form .fromGroup textarea {
        padding: 10px;
        margin: 0;
        border: none;
        background: var(--white-color);
        width: 100%;
        height: 120px;
        border-radius: 8px;
        outline: none;
        box-shadow: none;
}
.contactFormSection form .fromGroup input[type="submit"]:hover {
        background: #092047;
        color: var(--white-color);
        transition: all .2s;
}
.contactFormSection form .fromGroup input[type="submit"] {
        display: inline-block;
        border:none;
        font: 700 14px var(--default-font);
        line-height: 1.3;
        color: var(--white-color);
        text-transform: uppercase;
        padding: 15px 40px;
        letter-spacing: 2px;
        transition: all .2s;
        border-radius: 30px;
        background: var(--accent-color);
}
.mapSection {
        padding: 165px 0 0 0;
        margin: 0;
}

/* ========== single-post ======= */
.single-post .innerBannerSection .container h1{
        font: 300 45px var(--nav-font);
        text-transform: none;
        max-width: 865px;
}
/* .single-post #comments{
        display: none;
} */
.blogContainer{
        padding: 100px 0;
}
.blogContainer .nav-links{
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        padding: 15px 0 0 0;
        margin: 30px 0 0 0;
}
.mainblogContent figure{
        text-align: center;
        margin: -300px auto 0 auto;
        position: relative;
        background-color: #fff;
        max-width: 650px;
        padding: 15px;
        border-radius: 15px;
}
.theContent{
        text-align: center;
        max-width: 1000px;
        margin: 0 auto;
        padding: 30px 0 0 0;
}
.theContent ul{
        list-style-type: disc;
        list-style-position: inside;
}
.metatag{
        max-width: 600px;
        margin: -30px auto 30px auto;
        border: 1px solid #ccc;
        padding: 12px 10px;
        border-radius: 30px;
        position: relative;
        background: #eeeeee;
}
.breadcrumb{
        justify-content: center;
        margin: 15px 0 0;
}
.breadcrumb li, .breadcrumb a, .breadcrumb li.active, .breadcrumb li:before{
        color: #fff !important;
}

/* Comment Form Container */
.comment-respond {
    background: #fff;
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 30px;
}

/* Title */
.comment-reply-title {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* Labels */
.comment-form label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
    color: #333;
}

/* Textarea */
.comment-form textarea {
    width: 100%;
    border: 1px solid #ccc;
    padding: 12px;
    min-height: 180px;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-size: 15px;
}

.comment-form textarea:focus {
    border-color: #0073aa;
    box-shadow: 0 0 5px rgba(0,115,170,0.3);
}

/* Input Fields */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
    width: 100%;
    border: 1px solid #ccc;
    padding: 12px;
    margin-bottom: 18px;
    border-radius: 6px;
    font-size: 15px;
    transition: all 0.3s ease;
}

.comment-form input:focus {
    border-color: #0073aa;
    box-shadow: 0 0 5px rgba(0,115,170,0.3);
}

/* Checkbox */
.comment-form-cookies-consent label {
    display: inline-block;
    margin-left: 6px;
    font-size: 14px;
    color: #555;
}

/* Submit Button */
.comment-form input[type="submit"] {
    background: #0073aa;
    color: #fff;
    border: none;
    padding: 12px 22px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s ease;
}

.comment-form input[type="submit"]:hover {
    background: #005f8d;
}

/* Space between fields */
.comment-form p {
    margin-bottom: 18px;
}


/* Comment List Container */
.comment-list {
    margin-top: 30px;
    padding-left: 0;
    list-style: none;
}

/* Each comment item */
.comment-body {
    display: block;
    gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid #e5e5e5;
}

/* Avatar */
.comment-author .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

/* Comment Content Section */
.comment-content-wrap {
    flex: 1;
}

/* Author Name */
.comment-author b.fn {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

/* "says:" text */
.comment-author .says {
    display: none; /* Hides the "says:" */
}

/* Comment Meta (Date/Time) */
.comment-meta {
    font-size: 13px;
    color: #777;
    margin: 3px 0 8px;
}

.comment-meta a {
    color: #777;
    text-decoration: none;
}

/* Awaiting moderation message */
.comment-awaiting-moderation {
    display: block;
    font-size: 12px;
    color: #bb6a00;
    margin-bottom: 6px;
}

/* Comment text */
.comment-content p {
    margin: 8px 0;
    line-height: 1.6;
}

/* Reply Button */
.comment-reply-link {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 12px;
    background: #0073aa;
    color: white;
    font-size: 13px;
    border-radius: 4px;
    text-decoration: none;
    transition: 0.3s ease;
}

.comment-reply-link:hover {
    background: #005f8d;
}

/* Nested Replies (Thread) */
.children {
    margin-left: 50px; /* Indent */
    border-left: 2px solid #eee;
    padding-left: 20px;
    margin-top: 20px;
}

/* Make nested reply avatar smaller */
.children .avatar {
    width: 40px;
    height: 40px;
}
#comments {
        border-top: 1px solid #ccc;
        padding: 30px 0 0 0;
        margin: 40px 0 0 0;
        display: none;
}
#comments .comments-title{
        border-bottom: 1px solid #ccc;
        padding: 0 0 20px 0;
}

.home .faqSection{
        padding: 80px 0;
}
.blogContainer .nav-links a:hover{
        color: #ff0000;
}
/* ========== single-post end======= */
@media only screen and (max-width:1024px){
header#masthead .toggleMenu{
        display: block;
        font-size: 25px;
        color: var(--white-color);
}
header#masthead .menu-header-menu-container span .toggleClose{
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 99;
        background: #fff;
        padding: 10px 15px;
        border-radius: 0 0 0 30px;
}
.headerSection .menu-header-menu-container{
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 300px;
        background-color: #000;
        display: none;
}
.footerMenu{
        display: none;
}
.video-container{
        height: auto;
}

.video-container video{
        height: auto;
        border-radius: 0;
}
.heroBannerSection .container {
        position: relative;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        align-items: center;
        z-index: 99;
        max-width: 1920px !important;
        padding: 0 0;
}
.videoSection{
        width: 100%;
        height: auto;
}
.heroBannerSection .container h1{
        font: 600 25px var(--nav-font);
        background-color: #000;
        padding: 20px;
}
.aboutSection {
        padding: 40px 0;
}
.headerSection nav{
        padding: 0 30px 0 0;
}
header#masthead .menu-header-menu-container ul{
        display: block;
        margin: 60px 0 0 0;
}
header#masthead .menu-header-menu-container ul li {
        padding: 15px 20px;
        margin: 0;
        border-bottom: 1px solid #373737;
}
.headerSection .custom-logo {
        max-width: 67%;
        transition: 0.3s;
}
.aboutSection article {
        margin: 30px 0 0 0;
        padding: 0 0 0 0;
}
.aboutSection article h2{
        font: 300 45px var(--nav-font);
        line-height: 1.1;
}
.blogSection {
        padding: 60px 0;
        background-color: #efefef;
}
.blogSection .titleTag, .guaranteeSection .titleTag, .faqSection .titleTag {
        font: 400 35px var(--nav-font);
        line-height: 1.1;
        color: var(--heading-color);
        padding: 0 0 10px 0;
        text-align: center;
        text-transform: uppercase;
}
.buttongroup {
        margin: 0 0 0 0;
}
.guaranteeSection {
        padding: 40px 0;
}
.faqSection ul.listsec > li .quaction {
        font: 700 16px var(--default-font);
        line-height: 1.5;
        color: #ff0000;
        position: relative;
        cursor: pointer;
        padding: 10px 40px 10px 0;
        font-style: italic;
}
.faqSection {
       padding: 0 0;
       background-color: transparent;
}
.faqSection ul.listsec > li .quaction::after{
        top: 2px;
}
.faqSection ul.listsec > li .quaction.opensection::after{
        top: -2px;
}
.single-post .innerBannerSection .container h1 {
        font: 300 25px var(--nav-font);
        text-transform: none;
        max-width: 865px;
}
.innerBannerSection .container h1 {
        font: 300 45px var(--nav-font);
        line-height: 1.1;
        color: var(--white-color);
        text-transform: uppercase;
        text-align: center;
}
.innerBannerSection .container h1 span{
        font-size: 20px;
}
.innerBannerSection {
        position: relative;
        height: 45vh;
}
.single-post .innerBannerSection {
        position: relative;
        height: 70vh;
}
.mainsection {
        padding: 50px 0;
}
.metatag {
        max-width: 600px;
        margin: -30px auto 30px auto;
        border: 1px solid #ccc;
        padding: 12px 50px;
        border-radius: 10px;
        position: relative;
        background: #eeeeee;
}
.mainsection .mainlist h4 {
        display: block;
        font: 300 40px var(--nav-font);
        line-height: 1.1;
        color: var(--heading-color);
        padding: 30px 0 30px 0;
        max-width: 400px;
}
.mainsection .mainlist h5 {
        display: block;
        font: 300 35px var(--nav-font);
        line-height: 1.3;
        color: var(--heading-color);
        padding: 30px 0 30px 0;
}
 .grid-item {
        width: 50%;
}
.contactInfosection {
        padding: 50px 0;
}
.contactInfo{
        display: block;
}
.contactInfo aside{
        border-bottom: 1px solid #ccc;
        padding: 15px 0;
}
.contactInfo aside:last-child{
        border-bottom: none;
}
.contactFormSection{
        padding: 40px 15px;
        margin: 20px 0 0 0;
}
.mapSection {
        padding: 20px 0 0 0;
        margin: 0;
}
}
@media only screen and (min-width:1360px) and (max-width:1440px){
.single-post .innerBannerSection {
        position: relative;
        height: 80vh;
}
.single-post .mainblogContent figure{
        margin: -200px auto 0 auto;
}
.single-post .innerBannerSection .container h1{
        font: 300 35px var(--nav-font);
}
.breadcrumb li, .breadcrumb a, .breadcrumb li.active, .breadcrumb li::before {
        color: #fff !important;
        font-size: 14px;
}
.innerBannerSection .container h1{
        font: 300 50px var(--nav-font);
}
.innerBannerSection .container h1 span{
        font-size: 20px;
}
.grid-item{
        width: 25%;
}
.videoSection {
        background-color: transparent;
        overflow: hidden;
        padding: 0;
        width: 800px;
        height: 350px;
        border-radius: 0;
}
.blogSection .titleTag, .guaranteeSection .titleTag, .faqSection .titleTag{
        font-size: 45px;
}
}