:root {
  /* =====================
     Fonts
  ===================== */
  --font-heading: "Bricolage Grotesque", sans-serif;
  --font-body: "Manrope", sans-serif;

  /* =====================
     Font Sizes (Desktop)
  ===================== */
  --h1-size: 66px;
  --h2-size: 41px;
  --h3-size: 33px;
  --h4-size: 20px;
  --h5-size: 24px;
  --h6-size: 16px;

  --p-size: 15px;
  --btn-size: 15px;

  /* =====================
     Font Sizes (Mobile)
  ===================== */
  --h1-size-m: 32px;
  --h2-size-m: 24px;
  --h3-size-m: 20px;
  --h4-size-m: 18px;
  --h5-size-m: 16px;
  --h6-size-m: 16px;

  --p-size-m: 16px;
  --btn-size-m: 15px;

  /* =====================
     Colors
  ===================== */
  --color-primary: #E3002B;
  --color-secondary: #111111;
  --color-text: #2E2E2E;
  --color-accent: #E3002B;
  --color-tertiary: #E3002B2B;
  --color-bg: #ffffff;
  --color-border: #e5e7eb;

  /* =====================
     Layout
  ===================== */
  --container-width: 1270px;
  --section-padding: 80px;
  --radius: 8px;
}
body {
  font-family: var(--font-body);
  font-size: var(--p-size);
  font-weight: 500;
  color: var(--color-text);
  background-color: var(--color-bg);
}
.hero-banner h1{
	font-family: var(--font-heading);
	font-weight: 600 !important;
}
.review-title {
  font-family:var(--font-heading);
  font-weight: 400 !important;
  font-size: 26px !important;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	text-transform: capitalize;
	letter-spacing: 0;   
}

h1 { font-size: var(--h1-size); font-weight: 600; letter-spacing:-2px; }
h2 { font-size: var(--h2-size); font-weight: 700; }
h3 { font-size: var(--h3-size); font-weight: 700; }
h4 { font-size: var(--h4-size); font-weight: 600; }
h5 { font-size: var(--h5-size); font-weight: 600; }
h6 { font-size: var(--h6-size); font-weight: 500; }

/* Paragraph */
p {
  font-family: var(--font-body);
  font-size: var(--p-size);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 16px;
}
button,
.btn,
input[type="submit"] {
  font-family: var(--font-body);
  font-size: var(--btn-size);
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.16px;
  padding: 14px 28px;
  background-color: var(--color-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover,
.btn:hover {
  background-color: var(--color-secondary);
}
@media (max-width: 767px) {

  h1 { font-size: var(--h1-size-m); }
  h2 { font-size: var(--h2-size-m); }
  h3 { font-size: var(--h3-size-m); }
  h4 { font-size: var(--h4-size-m); }
  h5 { font-size: var(--h5-size-m); }
  h6 { font-size: var(--h6-size-m); }

  p {
    font-size: var(--p-size-m);
  }

  button,
  .btn {
    font-size: var(--btn-size-m);
    line-height: 24px;
  }

}
.section {
  padding: var(--section-padding) 0;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 15px;
}
ul{
	padding-left: 0 !important;
}
/* 1. Main Button Styling for All Classes */
.ast-custom-button, 
.btnn-parent, 
.forminator-button.forminator-button-submit {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 16px 56px 16px 32px !important;
    border-radius: 50px !important;
    background: #E3002B !important;
    color: #fff !important;
    font-weight: 600 !important;
    border: 1px solid #E3002B !important;
    overflow: hidden !important;
    transition: all 0.4s ease !important;
    z-index: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    width: fit-content !important;
	font-size: 15px !important;
}

/* 2. Background Slide Animation (The White Layer) */
.ast-custom-button::before, 
.btnn-parent::before,
.forminator-button.forminator-button-submit::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: #ffffff !important;
    transition: all 0.4s ease !important;
    z-index: -1 !important;
}

/* 3. The Icon Circle (Right Side) */
.ast-custom-button::after,
.btnn-parent::after,
.forminator-button.forminator-button-submit::after {
    content: '' !important;
    position: absolute !important;
    right: 16px !important;
    width: 25px !important;
    height: 25px !important;
    background: #fff !important;
    border-radius: 50% !important;
    background-image: url("https://runtimelogics.manaliholidays.in/wp-content/uploads/2026/02/Background.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 25px !important;
    transition: all 0.4s ease !important;
}

/* 4. Hover Effects for All Buttons */
.ast-custom-button:hover, 
.btnn-parent:hover,
.forminator-button.forminator-button-submit:hover {
    color: #E3002B !important;
}

.ast-custom-button:hover::before, 
.btnn-parent:hover::before,
.forminator-button.forminator-button-submit:hover::before {
    left: 0 !important;
}

.ast-custom-button:hover::after, 
.btnn-parent:hover::after,
.forminator-button.forminator-button-submit:hover::after {
    transform: translateX(5px) scale(1.1) !important;
    background-image: url("/wp-content/uploads/2026/02/Background.png") !important;
}
/*sec*/
.btnn-secondry {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 16px 56px 16px 32px !important;
    border-radius: 50px;
    background: #ffffff;
    color: #000000;
    font-weight: 600;
    border: 1px solid #ffffff;
    overflow: hidden;
    transition: all 0.4s ease;
    z-index: 1;
    text-decoration: none;
	width: fit-content !important;
}

/* Sliding background */
.btnn-secondry::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #E3002B;
    transition: all 0.4s ease;
    z-index: -1;
}
.buttnn-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 16px 56px 16px 32px !important;
    border-radius: 50px;
    background: #ffffff;
    color: #000000;
    font-weight: 700;
    border: 1px solid #ffffff;
    overflow: hidden;
    transition: all 0.4s ease;
    z-index: 1;
    text-decoration: none;
	width: fit-content !important;
}
.buttnn-cta:hover::after {
    transform: translateX(5px) scale(1.1) !important;
	background-image: url("/wp-content/uploads/2026/02/Background.svg");

}
.buttnn-cta:hover {
    color: #ffffff !important;
    border: 1px solid #E3002B;
}
.buttnn-cta::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: #E3002B;
	transition: all 0.4s ease;
	z-index: -1;
}
.buttnn-cta:hover::before {
    left: 0;
}
.buttnn-cta::after {
    content: '';
    position: absolute;
    right: 16px;
    width: 25px;
    height: 25px;
    background: #fff;
    border-radius: 50%;
	background-image: url("/wp-content/uploads/2026/02/Group-35.svg");
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.4s ease;
}
.btnn-secondry::after {
    content: '';
    position: absolute;
    right: 16px;
    width: 25px;
    height: 25px;
    background: #fff;
    border-radius: 50%;
    background-image: url("/wp-content/uploads/2026/02/Background.png");
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.4s ease;
}

/* Hover */
.btnn-secondry:hover {
    color: #ffffff;
    border: 1px solid #E3002B;
}
.btnn-secondry:hover::before {
    left: 0;
}
.btnn-secondry:hover::after {
    transform: translateX(5px) scale(1.1);
    background-image: url("/wp-content/uploads/2026/02/Background.svg");
}
/*header*/
.main-header-menu .menu-link, .main-header-menu>a {
     padding: 0 !important; 
}
ul#ast-hf-menu-1{
	gap: 25px !important;
}
.main-header-menu .menu-link {
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
}

/* Underline */
.main-header-menu .menu-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background-color: #e3002b;
    transition: width 0.3s ease;
}

/* Hover underline */
.main-header-menu .menu-link:hover::after {
    width: 100%;
}
/* Active state and hover */
.main-header-menu .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link, #masthead.is-sticky .main-header-menu .menu-link,
#masthead.is-sticky .main-header-menu .menu-link:hover,
#masthead.is-sticky .main-header-menu .current-menu-item > .menu-link,
#masthead.is-sticky .main-header-menu .current-menu-ancestor > .menu-link {
    color: #e3002b!important;
}
/* Scroll hone ke baad */
#masthead.is-sticky .main-header-menu-toggle {
	background:  #e3002b  !important;
	border-radius: 5px;
}
.custom-logo {
    transition: opacity 0.3s ease;
}

.main-header-menu .current-menu-item > .menu-link::after,
.main-header-menu .current-menu-ancestor > .menu-link::after {
    width: 100%;
}
/* Smooth transition */
#masthead {
    transition: all 0.5s ease;
}

/* Sticky active state */
/* #masthead.is-sticky {
   	position: fixed;
    top: 0;
    width: 100%;
    z-index: 99999 !important;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
} */
@media (max-width:768px){
	.site-below-footer-wrap {
		padding: 0 10px;
	}
}
/*** header end ***/

  /* Remove last one border */
 @media (max-width: 768px) {

	 .footer-menu-area .wp-block-column {
		 border-bottom: 1px solid rgba(255,255,255,0.3);
	 }
/* 
	 .custom-footer-wrapper .widget_nav_menu .menu {
		 display: none;
	 }

	 .custom-footer-wrapper .widget_nav_menu.active .menu {
		 display: block;
	 }

	 .custom-footer-wrapper .widgettitle {
		 position: relative;
		 cursor: pointer;
		 padding: 0px 0;
		 margin-bottom: 0;
		 font-size: 18px;
		 color: #fff;
	 }

	 .custom-footer-wrapper .widget_nav_menu .menu {
		 display: none;
		 padding-left: 0;
		 margin-top: 10px;
	 } */
    /* Hide the menu by default */
    .footer-menu-area .widget_nav_menu .menu {
        display: none !important; 
    }
 
    /* Show the menu ONLY when the parent has the .active class */
   .footer-menu-area .widget_nav_menu.active .menu {
        display: block !important;
    }
	 /* PLUS ICON */
	 .custom-footer-wrapper .widgettitle{
		 position: relative;
	 }
	 .custom-footer-wrapper .widgettitle::after {
		 content: "+";
		 position: absolute;
		 right: 0;
		 top: 10px;
		 font-size: 20px;
	 }

	 .custom-footer-wrapper .widget_nav_menu.active .widgettitle::after {
		 content: "-";
	 }
	 .site-footer .widget_nav_menu.active nav .menu{
		 display: flex !important;
		 flex-direction: column;
	 }
}
/* Astra Main Header Transition */
#masthead {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    will-change: transform;
}

/* Jab header hide ho */
.hide-main-header #masthead {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none; /* Taaki hidden header ke links click na hon */
}

/* Portfolio Nav Positioning */
.custom-portfolio-nav {
    top: 0 !important;
    z-index: 999;
    background: #fff;
    transition: box-shadow 0.3s ease;
}

/* Jab nav top par ho tab shadow dikhe (optional) */
.hide-main-header .custom-portfolio-nav {
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.footer-last-wized {
    gap: 10px;
}


.matrix-card {
	background: #fff;
	border-radius: 12px;
	padding: 25px 15px;
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
	border: 1px solid rgba(0,0,0,0.05);
	box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.matrix-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.matrix-icon-wrapper {
	margin-bottom: 15px;
	color: #0d6efd; /* Fallback color */
}

.matrix-icon-wrapper img {
	height: 50px; /* Size if using Image URL */
	width: auto;
	object-fit: contain;
}
/* Mobile Specific Fix */
@media (max-width: 768px) {
	nav.mobile-navbar .container {
		padding: 0 0px !important; 
	}
	.is-sticky .mobile-navbar {
		background: #e3002b !important;
		height: 36px;
		width: 36px;
		padding: 0px 0px;
		border-radius: 10px!important;
	}
}

/*  */