/* Css For MetroBank */

/************ TABLE OF CONTENTS ***************
1. Fonts
2. Reset
3. Global
4. Main Header/style-one/style-two
5. Main Slider/style-one/style-two
6. Intro Section
7. Welcome Section
9. Cta Section
8. Research Fields
10. Testimonial Section
11. Researches Section
12. Team Section
14. Video
15. Fact Counter
16. News Section
19. Clients Section
20. Main Footer
21. Footer Bottom
22. Research Style Two
23. Innovative Solution
24. Discover Section
25. Testimonial Section
26. Chooseus Section
27. News Style Two
28. Page Title
29. Research Page Section
30. Research Details
31. Professor Page Section
32. Professor Details
33. About Section
34. Error Section
35. Blog Page Section
36. Blog Details
37. Blog Sidebar
38. Contact Section
39. Google Map


**********************************************/



/*** 

====================================================================
  Reset
====================================================================

 ***/
* {
  margin:0px;
  padding:0px;
  border:none;
  outline:none;
}


/*** 

====================================================================
  Global Settings
====================================================================

 ***/


:root{

  /* Primary Brand Red */
  --theme-color: #fed64d;

  /* Teal Color*/
  --secondary-color: #0b8cf9;

  /* Light Pink */
  --pink-color: #FFC0CB;

  /* Violet Purple */
  --violet-color: #7F00FF;

  /* Crimson Red */
  --crimson-color: #fed64d;

  /* Orange */
  --orange-color: #FFA500;

  /* Paragraph Text Gray */
  --text-color: #000000;

  /* Heading / Title Black */
  --title-color: #141417;
  
  --pdf-icon-color: #DC143C;
  
  --dark-blue-color: #0d1a3d;
  
  --marquee-text-color: #ff6a00;
  
  --donwload-btn: #ce2a50;
  
  --donwload-hover-btn: #9f2a45;
  
  --mixed-pink-color: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  
  --mixed-lightgreen-color: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);

  --secondary-light: #c2e7ff;
  
  --custom-max-width: 1320px;
  
  --bg-light: #f8f9fa;
  --text-main: #333;
  --text-muted: #6c757d;
  --white: #ffffff;

  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.15);

  --radius-md: 12px;
  --radius-lg: 16px;

  /* Fonts */
  --text-font: 'Inter', sans-serif;
  --title-font: 'Manrope', sans-serif;
}

.price-tag.no-change {
    background: var(--mixed-pink-color);
    box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
}

body {
  font-size:16px;
  color: var(--text-color);
  line-height:28px;
  font-weight:400;
  background:#ffffff;
  font-family: var(--text-font);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center top;
  -webkit-font-smoothing: antialiased;
}

  @media (min-width:1200px) {
  .container {
    max-width: 1200px;
    padding: 0px 15px;
  }
}

.large-container{
  /* max-width: 1710px;
  padding: 0px 15px; */
  margin: 0 auto;
}

.container-fluid{
  padding: 0px;
}

.auto-container{
  position:static;
  max-width:var(--custom-max-width);
  padding:20px 15px;
  margin:0 auto;
}

.tmp-auto-container{
  position:static;
  max-width:1320px;
  padding:20px 15px;
  margin:0 auto;
}

.small-container{
  max-width:680px;
  margin:0 auto;
}

.boxed_wrapper{
  position: relative;
  margin: 0 auto;
  overflow: hidden !important;
  width: 100%;
  min-width: 300px;
}


a{
  text-decoration:none;
  transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -webkit-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
}

a:hover{
  text-decoration:none;
  outline:none;
}

input,button,select,textarea{
  font-family: var(--text-font);
  font-weight: 400;
  font-size: 18px;
  background: transparent;
}

::-webkit-input-placeholder {
  color: inherit;
}

::-moz-input-placeholder {
  color: inherit;
}

::-ms-input-placeholder {
  color: inherit;
}

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

input{
  transition: all 500ms ease;
}

button:focus,
input:focus,
textarea:focus{
  outline: none;
  box-shadow: none;
  transition: all 500ms ease;
}

p{
  position: relative;
  font-family: var(--text-font);
  color: var(--text-color);
  font-weight: 400;
  margin: 0px;
  transition: all 500ms ease;
}

h1,h2,h3,h4,h5,h6{
  position:relative;
  font-family: var(--title-font);
  font-weight: 700;
  color: var(--title-color);
  margin: 0px;
  transition: all 500ms ease;
}

/* Preloader */

.handle-preloader {
  align-items: center;
  -webkit-align-items: center;
  display: flex;
  display: -ms-flexbox;
  height: 100%;
  justify-content: center;
  -webkit-justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999999;
  background: var(--secondary-color);
}

.preloader-close{
  position: fixed;
  z-index: 99999999;
  font-size: 16px;
  background: #fff;
  color: red;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  right: 30px;
  top: 30px;
  font-weight: 400;
}

.handle-preloader .animation-preloader {
  position: absolute;
  z-index: 100;
}

.handle-preloader .animation-preloader .spinner{
  animation: spinner 1s infinite linear;
  border-radius: 50%;
  height: 150px;
  margin: 0 auto 45px auto;
  width: 150px;
}

.handle-preloader .animation-preloader .txt-loading {
  text-align: center;
  user-select: none;
}

.handle-preloader .animation-preloader .txt-loading .letters-loading:before{
  animation: letters-loading 4s infinite;
  content: attr(data-text-preloader);
  left: 0;
  opacity: 0;
  top:0;
  position: absolute;
}

.handle-preloader .animation-preloader .txt-loading .letters-loading{
  font-family: var(--title-font);
  font-weight: 500;
  letter-spacing: 15px;
  display: inline-block;
  position: relative;
  font-size: 60px;
  line-height: 60px;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.30);
}

.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {animation-delay: 0.2s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {animation-delay: 0.4s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {animation-delay: 0.6s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {animation-delay: 0.8s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before { animation-delay: 1s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before { animation-delay: 1.2s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before { animation-delay: 1.4s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(9):before { animation-delay: 1.6s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(10):before { animation-delay: 1.8s;}
.handle-preloader .loader-section {
  background-color: #ffffff;
  height: 100%;
  position: fixed;
  top: 0;
  width: calc(50% + 1px);
}

.preloader .loaded .animation-preloader {
  opacity: 0;
  transition: 0.3s ease-out;
}

.handle-preloader .animation-preloader .txt-loading .letters-loading:before{
  color: #ffffff;
}

.handle-preloader .animation-preloader .spinner{
  border: 3px solid #ffffff;
  border-top-color: rgba(255, 255, 255, 0.5); 
}

/* Animación del preloader */
@keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}
@keyframes letters-loading {
  0%,
  75%,
  100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }

  25%,
  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

@media screen and (max-width: 767px) {
  .handle-preloader .animation-preloader .spinner {
    height: 8em;
    width: 8em;
  }
}
@media screen and (max-width: 500px) {
  .handle-preloader .animation-preloader .spinner {
    height: 7em;
    width: 7em;
  }
  .handle-preloader .animation-preloader .txt-loading .letters-loading {font-size: 30px; letter-spacing: 10px;}
}


.centred{
  text-align: center;
}

.pull-left{
  float: left;
}

.pull-right{
  float: right;
}


figure{
  margin: 0px;
}

img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  transition-delay: .1s;
  transition-timing-function: ease-in-out;
  transition-duration: .7s;
  transition-property: all;
}

.row{
  --bs-gutter-x: 30px;
}

.theme-btn.btn-two{
  background: var(--secondary-color);
}

.theme-btn.btn-three{
  background: #fff;
  color: var(--theme-color);
}

.theme-btn.btn-two:before, .theme-btn.btn-two:after{
  background: var(--theme-color);
}

.theme-btn:hover:before {
  border-radius: 0;
  transform: scale(1) rotate(-180deg);
}

.theme-btn:hover:after {
  border-radius: 0;
  transform: scale(1) rotate(180deg);
}

.category-content {
    max-height:1000px;
}
.parallax-bg{
  position: absolute;
  left: 0px;
  top: -30%;
  width: 100%;
  height: calc(100% + 30%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


/** styled-pagination */

.pagination{
  position: relative;
  display: block;
}

.pagination li{
  position: relative;
  display: inline-block;
  margin: 0px 4px;
}

.pagination li a{
  position: relative;
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  height: 60px;
  width: 60px;
  line-height: 62px;
  background: #ffffff;
  box-shadow: 0px 10px 40px 10px rgba(0, 0, 0, 0.07);
  text-align: center;
  color: var(--title-color);
  border-radius: 50%;
  z-index: 1;
  transition: all 500ms ease;
}

.pagination li a:hover,
.pagination li a.current{
  color: #fff;
  background: var(--theme-color);
  border-color: var(--theme-color);
}

.pagination li a i{
  font-size: 16px;
}

.mr-0{
  margin: 0px !important;
}

/** scroll-to-top **/

.scroll-to-top{
  position: fixed;
  right: 0px;
  bottom: 100px;
  transform: rotate(90deg);
  z-index: 99;
}

.scroll-to-top .visible {
  visibility: visible!important;
  opacity: 1!important;
}

.scroll-to-top .scroll-top-inner {
  opacity: 0;
  visibility: hidden;
}

.scroll-to-top .scroll-top-inner{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: all cubic-bezier(.4,0,.2,1) .4s;
  -o-transition: all cubic-bezier(.4,0,.2,1) .4s;
  transition: all cubic-bezier(.4,0,.2,1) .4s;
}

.scroll-to-top .scroll-bar {
  width: 50px;
  height: 2px;
  margin-right: 10px;
  position: relative;
}

.scroll-to-top .scroll-bar:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #f4244f;
  opacity: .3;
}

.scroll-to-top .scroll-bar .bar-inner {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background-color: currentColor;
}

.scroll-to-top .scroll-bar-text{
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  color: var(--theme-color);
  text-shadow: 0px 1px 0px #fff;
  transition: all 500ms ease;
}

.scroll-to-top .scroll-bar-text:hover{
  transform: scale(1.1);
}



@-webkit-keyframes ripple {
  70% {
    -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes ripple {
  70% {
    -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* =========================================
   NEW MODERN DESIGN: DOWNLOAD CENTER HEADER
   ========================================= */
/* =========================================
UPDATED: LEFT-ALIGNED SECTION TITLES
========================================= */
.sec-title.centred {
    text-align: left !important;
    border-left: none !important;
    padding-left: 0 !important;
    margin: 0 0 30px 0 !important; /* Removed 'auto' to prevent centering */
    max-width: 100% !important;
    display: block !important;
}

.sec-title.centred h6 {
    display: inline-block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--secondary-color) !important;
    background: rgba(11, 140, 249, 0.1) !important;
    border: 1px solid rgba(11, 140, 249, 0.2) !important;
    padding: 8px 24px !important;
    border-radius: 50px !important;
    margin: 0 0 20px 0 !important; /* Ensures it aligns left */
    line-height: 1 !important;
}

.sec-title.centred h2 {
    font-size: 42px !important; /* Increased from 20px, as 20px is too small for a main heading */
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #0a1f3f !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    display: block !important;
    text-align: left !important;
}

/* 4. Elegant Gradient Underline with Fade-Out (Blur) End */
.sec-title.centred h2::after {
    content: '' !important;
    display: block !important;
    width: 280px !important; /* Slightly wider to give the fade effect room to breathe */
    height: 4px !important;
    /* The gradient now fades to 'transparent' at 100% to create the blur/fade-out end */
    background: linear-gradient(90deg, #667eea 0%, #00d88a 65%, transparent 100%) !important;
	margin: 15px 0 0 0 !important; /* Changed from 'auto' to '0' to align the underline to the left */
	/* margin: 15px auto 0 auto !important; */  /* <--- UPDATED: Centers the line */
    border-radius: 4px !important;
}

.sec-title.centred p {
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: #555555 !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
    .sec-title.centred h2 {
        font-size: 32px !important;
    }
    .sec-title.centred p {
        font-size: 15px !important;
    }
}
/*** 

===================================================
                        Home-Page-One
===================================================

***/


/** main-header **/

.main-header{
  position:relative;
  left:0px;
  top:0px;
  right: 0px;
  z-index:999;
  width:100%;
  transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -webkit-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
}

.sticky-header{
  position:fixed;
  opacity:0;
  visibility:hidden;
  left:0px;
  top:0px;
  width:100%;
  z-index:0;
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -webkit-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
}

.fixed-header .sticky-header{
  z-index:999;
  opacity:1;
  visibility:visible;
  -ms-animation-name: fadeInDown;
  -moz-animation-name: fadeInDown;
  -op-animation-name: fadeInDown;
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -ms-animation-duration: 500ms;
  -moz-animation-duration: 500ms;
  -op-animation-duration: 500ms;
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
  -ms-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -op-animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -ms-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -op-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/** header-top **/

.header-top{
  position: relative;
  width: 100%;
  background: #0a1f3f;
  padding: 16px 0px;
}

.header-top .top-inner{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-top .links-list{
  position: relative;
  display: flex;
  align-items: center;
}

.header-top .links-list li{
  margin-right: 35px;
}

.header-top .links-list li:last-child{
  margin: 0px !important;
}

.header-top .links-list li a{
  position: relative;
  display: inline-block;
  color: #fff;
}

.header-top .links-list li a:hover{
  color: var(--theme-color);
}

.header-top .info-list{
  position: relative;
  display: flex;
  align-items: center;
}

.header-top .info-list li{
  position: relative;
  margin-right: 40px;
  padding-left: 32px;
  color: #fff;
}

.header-top .info-list li:last-child{
  margin: 0px !important;
}

.header-top .info-list li i{
  position: absolute;
  left: 0px;
  top: 5px;
  font-size: 18px;
  color: var(--theme-color);
}

.header-top .info-list li a{
  position: relative;
  display: inline-block;
  color: #fff;
}

.header-top .info-list li a:hover{
  color: var(--theme-color);
}

.main-header .outer-box{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start; /* Changed from space-between */
	background-color: var(--secondary-color);
	color: #ffffff;
}

.main-header .menu-area{
	margin-left: 30px; /* Add gap between logo and menu */
	margin-top: -10px;
}

.main-header .outer-box .logo-box{
  position: relative;
  margin-top: -66px;  /* Reduced from -60px */
  padding: 5px 0px 3px 0px;  /* Reduced from 40px */
  background: var(--theme-color);
  z-index: 1;
}

.main-header .outer-box .logo-box .shape{
  position: absolute;
  top: 0px;
  right: -24px;
  width: 24px;
  height: 100%;
  background: var(--theme-color);
  clip-path: polygon(100% 0%, 0% 50%, 100% 100%, 0 100%, 0 50%, 0 0);
}

.main-header .outer-box .logo-box:after{
  position: absolute;
  content: '';
  top: 0px;
  right: -32px;
  width: 32px;
  height: 100%;
  background: var(--theme-color);
  clip-path: polygon(100% 0%, 25% 50%, 100% 100%, 0 100%, 0 50%, 0 0);
  opacity: 0.15;
}

.main-header .outer-box .logo-box:before{
  position: absolute;
  content: '';
  background: var(--theme-color);
  width: 5000px;
  height: 100%;
  top: 0px;
  right: 0px;
  z-index: -1;
}

.main-header .menu-right-content{
  position: relative;
  display: flex;
  align-items: center;
}

.main-header .menu-right-content .theme-btn{
  padding: 13px 30px;
}

.main-header .menu-area{
  position: relative;
  display: flex;
  align-items: center;
}


/** main-menu **/

.main-menu{
  float: left;
}

.main-menu .navbar-collapse{
  padding:0px;
  display:block !important;
}

.main-menu .navigation{
  margin:0px;
}

.main-menu .navigation > li{
  position:inherit;
  float:left;
  z-index:2;
  margin: 0px 20px;
  -webkit-transition:all 300ms ease;
  -moz-transition:all 300ms ease;
  -ms-transition:all 300ms ease;
  -o-transition:all 300ms ease;
  transition:all 300ms ease;
}

.main-menu .navigation > li:last-child{
  margin-right:0px !important;
}

.main-menu .navigation > li:first-child{
  margin-left: 0px !important;
}

.main-menu .navigation > li > a{
  position:relative;
  display:block;
  text-align:center;
  font-size:18px;
  line-height:26px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-weight:600;
  font-family: var(--title-font);
  opacity:1;
  color: #fff;
  z-index:1;
  -webkit-transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
  transition:all 500ms ease;
}

.main-menu .navigation > li.dropdown > a{
  padding-right: 17px;
}

/*** Active Menu Item Style ***/
.main-menu .navigation > li.current > a,
.main-menu .navigation > li:hover > a {
    color: var(--theme-color) !important;
    font-weight: bold;
}

.main-menu .navigation > li.dropdown > a:before{
  position: absolute;
  content: "\f107";
  font-family: 'Font Awesome 5 Pro';
  top: 20px;
  right: 0px;
  font-weight: 500;
  transition: all 500ms ease;
}

.main-menu .navigation > li > ul,
.main-menu .navigation > li > .megamenu{
  position:absolute;
  left: inherit;
  top:100%;
  width:230px;
  margin-top: 15px;
  z-index:100;
  display:none;
  background: var(--secondary-color);
  opacity: 0;
  visibility: hidden;
  border-radius: 0px;
  transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -webkit-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
}

.main-menu .navigation > li > ul.from-right{
  left:auto;
  right:0px;  
}

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

.main-menu .navigation > li > ul > li > a,
.main-menu .navigation > li > .megamenu li > a{
  position:relative;
  display:block;
  padding: 10px 25px;
  line-height:24px;
  font-weight:600;
  font-size:16px;
  text-transform:capitalize;
  font-family: var(--title-font);
  color:#fff;
  text-align: left;
  transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -webkit-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
}

.main-menu .navigation > li > ul > li > a{
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.main-menu .navigation > li > .megamenu li > a{
  padding-left: 0px;
}

.main-menu .navigation > li > .megamenu h4{
  display: block;
  font-size: 20px;
  line-height: 30px;
  color: #ffffff;
}

.main-menu .navigation > li > ul > li > a:hover,
.main-menu .navigation > li > .megamenu li > a:hover{
  padding-left: 35px;
}

.main-menu .navigation > li > ul > li:last-child > a,
.main-menu .navigation > li > .megamenu li:last-child > a{
  border-bottom: none;
}

.main-menu .navigation > li > ul > li.dropdown > a:after{
  font-family: 'Font Awesome 5 Pro';
  content: "\f105";
  position:absolute;
  right:20px;
  top:10px;
  display:block;
  line-height:24px;
  font-size:16px;
  font-weight:800;
  text-align:center;
  z-index:5;  
}

.main-menu .navigation > li > ul > li > ul{
  position:absolute;
  left:100%;
  top:0%;
  margin-top: 15px;
  background: var(--secondary-color);
  width:230px;
  z-index:100;
  display:none;
  border-radius: 0px;
  transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -webkit-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
}

.main-menu .navigation > li > ul > li > ul.from-right{
  left:auto;
  right:0px;  
}

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

.main-menu .navigation > li > ul > li > ul > li:last-child{
  border-bottom:none; 
}

.main-menu .navigation > li > ul > li > ul > li > a{
  position:relative;
  display:block;
  padding:10px 25px;
  line-height:24px;
  font-weight:600;
  font-size:16px;
  text-transform:capitalize;
  font-family: var(--title-font);
  color:#fff;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-align: left;
  transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -webkit-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
}

.main-menu .navigation > li > ul > li > ul > li:last-child > a{
  border-bottom: none;
}

.main-menu .navigation > li > ul > li > ul > li > a:hover{
  padding-left: 35px;
}

.main-menu .navigation > li > ul > li > ul > li.dropdown > a:after{
  font-family: 'Font Awesome 5 Pro';
  content: "\f105";
  position:absolute;
  right:20px;
  top:12px;
  display:block;
  line-height:24px;
  font-size:16px;
  font-weight:900;
  z-index:5;  
}

.main-menu .navigation > li.dropdown:hover > ul,
.main-menu .navigation > li.dropdown:hover > .megamenu{
  visibility:visible;
  opacity:1;
  margin-top: 0px;
  top: 100%;
}

.main-menu .navigation li > ul > li.dropdown:hover > ul{
  visibility:visible;
  opacity:1;
  top: 0%; 
  margin-top: 0px;
}

.main-menu .navigation li.dropdown .dropdown-btn{
  position:absolute;
  right:-32px;
  top:66px;
  width:34px;
  height:30px;
  text-align:center;
  font-size:18px;
  line-height:26px;
  color:#3b3b3b;
  cursor:pointer;
  display: none;
  z-index:5;
  transition: all 500ms ease;
}

.main-menu .navigation li.current.dropdown .dropdown-btn,
.main-menu .navigation li:hover .dropdown-btn{
  
}

.main-menu .navigation li.dropdown ul li.dropdown .dropdown-btn{
  display: none;
}

.menu-area .mobile-nav-toggler {
  position: relative;
  float: right;
  font-size: 40px;
  line-height: 50px;
  cursor: pointer;
  background: var(--secondary-color);
  display: none;
}

.mobile-menu .nav-logo img{
  max-width: 160px;
}

.menu-area .mobile-nav-toggler .icon-bar{
  position: relative;
  height: 2px;
  width: 30px;
  display: block;
  margin-bottom: 5px;
  background-color: #fff;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.menu-area .mobile-nav-toggler .icon-bar:last-child{
  margin-bottom: 0px;
}


/** megamenu-style **/

.main-menu .navigation > li.dropdown > .megamenu{
  position: absolute;
  width: 100%;
  padding: 30px 50px;
  left: 0px;
}

.main-menu .navigation li.dropdown .megamenu li h4{
  margin-bottom: 10px;
}

/* 1. Reduce navigation link padding in sticky header */
.sticky-header .main-menu .navigation > li > a {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* 2. Adjust dropdown arrow position */
.sticky-header .main-menu .navigation > li.dropdown > a:before {
    top: 10px !important;
}

/* 3. Make sticky header logo box more compact */
.sticky-header .outer-box .logo-box {
    margin-top: 0px !important;
    padding: 2px 0px !important;
}

/* 4. Reduce sticky header logo image size if needed */
.sticky-header .outer-box .logo-box .logo img {
    max-height: 60px;
}

/* 5. Adjust Rates and Tender buttons in sticky header */
.sticky-header .menu-right-content .theme-btn {
    padding: 10px 25px !important;
}


/** mobile-menu **/

.nav-outer .mobile-nav-toggler{
  position: relative;
  float: right;
  font-size: 40px;
  line-height: 50px;
  cursor: pointer;
  color:#3786ff;
  display: none;
}

.mobile-menu{
  position: fixed;
  right: 0;
  top: 0;
  width: 300px;
  padding-right:30px;
  max-width:100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 999999;
  transition: all 900ms ease;
}

.mobile-menu .navbar-collapse{
  display:block !important; 
}

.mobile-menu .nav-logo{
  position:relative;
  text-align:left;  
}

.mobile-menu-visible{
  overflow: hidden;
}

.mobile-menu-visible .mobile-menu{
  opacity: 1;
  visibility: visible;
}

.mobile-menu .menu-backdrop{
  position: fixed;
  left: 0%;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 900ms ease;
  background-color: #000;
}

.mobile-menu-visible .mobile-menu .menu-backdrop{
  opacity: 0.70;
  visibility: visible;
  right: 100%;
  -webkit-transition: all .8s ease-out 0s;
  -o-transition: all .8s ease-out 0s
}

.mobile-menu .menu-box{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  background: var(--secondary-color);
  padding: 0px 0px;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  border-radius: 0px;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  transition: all 900ms ease !important;
}

.mobile-menu-visible .mobile-menu .menu-box{
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease;
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
}

.mobile-menu .close-btn{
  position: absolute;
  right: 25px;
  top: 10px;
  line-height: 30px;
  width: 24px;
  text-align: center;
  font-size: 18px;
  color: #ffffff;
  cursor: pointer;
  z-index: 10;
  -webkit-transition:all 0.9s ease;
  -moz-transition:all 0.9s ease;
  -ms-transition:all 0.9s ease;
  -o-transition:all 0.9s ease;
  transition:all 0.9s ease;
}

.mobile-menu-visible .mobile-menu .close-btn{
  -webkit-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  transform:rotate(360deg);
}

.mobile-menu .close-btn:hover{
  -webkit-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  transform:rotate(90deg);
}

.mobile-menu .navigation{
  position: relative;
  display: block;
  width: 100%;
  float: none;
}

.mobile-menu .navigation li{
  position: relative;
  display: block;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.mobile-menu .navigation:last-child{
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.mobile-menu .navigation li > ul > li:first-child{
  border-top: 1px solid rgba(255,255,255,0.10);
}

.mobile-menu .navigation li > a{
  position: relative;
  display: block;
  line-height: 24px;
  padding: 10px 25px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-transform: uppercase;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease; 
}

.mobile-menu .navigation li ul li > a{
  font-size: 16px;
  margin-left: 20px;
  text-transform: capitalize;
}

.mobile-menu .navigation li > a:before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  height:0;
  border-left:5px solid #fff;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease; 
}

.mobile-menu .navigation li.current > a:before{
  height:100%;
}

.mobile-menu .navigation li.dropdown .dropdown-btn{
  position:absolute;
  right:6px;
  top:6px;
  width:32px;
  height:32px;
  text-align:center;
  font-size:16px;
  line-height:32px;
  color:#ffffff;
  background:rgba(255,255,255,0.10);
  cursor:pointer;
  border-radius:2px;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease; 
  z-index:5;
}

.mobile-menu .navigation li.dropdown .dropdown-btn.open{
  color: #ffffff;
  -webkit-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  transform:rotate(90deg);  
}

.mobile-menu .navigation li > ul,
.mobile-menu .navigation li > ul > li > ul,
.mobile-menu .navigation > li.dropdown > .megamenu{
  display: none;
}

.mobile-menu .social-links{
  position:relative;
  padding:0px 25px;
}

.mobile-menu .social-links li{
  position:relative;
  display:inline-block;
  margin:0px 10px 10px;
}

.mobile-menu .social-links li a{
  position:relative;
  line-height:32px;
  font-size:16px;
  color:#ffffff;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease; 
}

.mobile-menu .social-links li a:hover{
  
}

.text-align {
	text-align : justify;
}
div#mCSB_1_container{
  top: 0px !important;
}

.mobile-menu .contact-info {
  position: relative;
  padding: 120px 30px 20px 30px;
}

.mobile-menu .contact-info h4 {
  position: relative;
  font-size: 20px;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 20px;
}

.mobile-menu .contact-info ul li {
  position: relative;
  display: block;
  font-size: 16px;
  color: rgba(255,255,255,0.80);
  margin-bottom: 3px;
}

.mobile-menu .contact-info ul li a{
  color: rgba(255,255,255,0.80);
}

.mobile-menu .contact-info ul li a:hover{
  
}

.mobile-menu .contact-info ul li:last-child{
  margin-bottom: 0px;
}

.main-header .outer-box{
  position: relative;
}

.owl-dots-none .owl-dots,
.owl-nav-none .owl-nav{
  display: none !important;
}

.owl-nav button{
  background: transparent;
}

.float-bob-y {
  animation-name: float-bob-y;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: float-bob-y;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: float-bob-y;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob-y;
  -ms-animation-duration: 2s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob-y;
  -o-animation-duration: 2s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}

.float-bob-x{
  animation-name: float-bob-x;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: float-bob-x;
  -webkit-animation-duration: 15s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: float-bob-x;
  -moz-animation-duration: 15s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob-x;
  -ms-animation-duration: 15s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob-x;
  -o-animation-duration: 15s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}


/** rtl-switcher **/

.demo-rtl{
  position: fixed;
  top: 390px;
  left: 10px;
  z-index: 9999;
}

button.rtl{
  background: var(--theme-color);
  display: block;
  text-indent: inherit;
  font-size: 16px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-weight: 700;
  margin: 0px;
  color: #fff !important;
  border-radius: 50%;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
  transition: all 500ms ease;
}

.demo-ltr{
  position: fixed;
  top: 390px;
  left: auto;
  right: 10px;
  z-index: 9999;
}

button.ltr {
  background: var(--theme-color);
  display: block;
  text-indent: inherit;
  font-size: 16px;
  font-weight: 700;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin: 0px;
  color: #fff !important;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 1.0);
  transition: all 500ms ease;
}

.boxed_wrapper.ltr .demo-rtl{
  display: block;
}

.boxed_wrapper.ltr .demo-ltr{
  display: none;
}

.boxed_wrapper.rtl .demo-rtl{
  display: none;
}

.boxed_wrapper.rtl .demo-ltr{
  display: block;
}

@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}

@keyframes shine {
  100% {
    left: 125%;
  }
}


/** main-footer **/

.main-footer{
  position: relative;
  background: var(--secondary-color);
}

.main-footer .widget-section{
  position: relative;
  padding: 50px 0px 10px 0px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.main-footer .footer-logo{
  margin-bottom: 21px;
}

.main-footer p,
.main-footer a{
  color: #fff;
}

.main-footer a:hover{
  color: var(--theme-color);
}

.main-footer .logo-widget p{
  margin-bottom: 40px;
  text-align: justify;
}

.main-footer .social-links{
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 70px;
}

.footer-bottom .copyright,
.footer-bottom .copyright p {
    text-align: center !important;
    width: 100%;
}


.main-footer .social-links li{
  margin-right: 20px;
}

.main-footer .social-links li:last-child{
  margin: 0px !important;
}

.main-footer .social-links li a{
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.20);
  text-align: center;
  border-radius: 50%;
}

.main-footer .social-links li a:hover{

}

.main-footer .widget-title{
  position: relative;
  display: block;
  margin-bottom: 15px;
}

.main-footer .widget-title h4{
  font-size: 20px;
  line-height: 28px;
  font-weight: 800;
  color: #fedc62;
}

.main-footer .links-widget .links-list li{
  position: relative;
  display: block;
  font-size: 16px;
  line-height: 26px;
  margin-bottom: 10px;
}

.main-footer .links-widget .links-list li:last-child{
  margin-bottom: 0px;
}

.main-footer .links-widget .links-list li a{
  position: relative;
  display: inline-block;
  padding-left: 15px;
}

.main-footer .links-widget .links-list li a {
    transition: all 0.3s ease;
}

.main-footer .links-widget .links-list li a:hover {
    font-weight: 700;
    text-decoration: underline;
}
.main-footer .links-widget .links-list li a:before{
  position: absolute;
  content: '';
  background: #fff;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  left: 0px;
  top: 11px;
  transition: all 500ms ease;
}

.main-footer .links-widget .links-list li a:hover:before{
  background: var(--theme-color);
}

.main-footer .contact-widget .form-inner .form-group{
  position: relative;
  margin-bottom: 20px;
}

.main-footer .contact-widget .form-inner .form-group .select-box{
  min-height: 55px;
}

.main-footer .contact-widget .form-inner .form-group:last-child{
  margin-bottom: 0px;
  padding-top: 10px;
}

.main-footer .contact-widget .form-inner .form-group .nice-select,
.main-footer .contact-widget .form-inner .form-group input[type='text']{
  position: relative;
  display: block;
  width: 100%;
  height: 55px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.50);
  padding: 0px 20px;
  line-height: 55px;
  background: transparent;
  border-radius: 0px;
  transition: all 500ms ease;
}

.main-footer .contact-widget .form-inner .form-group .nice-select .option{
  color: #222;
}

.nice-select:before{
  position: absolute;
  content: '\e92e';
  font-family: 'icomoon';
  font-size: 16px;
  top: 0px;
  right: 20px;
  color: rgba(255, 255, 255, 0.50);
}

.main-footer .contact-widget .form-inner .form-group .theme-btn:before,
.main-footer .contact-widget .form-inner .form-group .theme-btn:after{
  background: #fff !important;
}

.main-footer .contact-widget .form-inner .form-group .theme-btn:hover{
  color: var(--title-color) !important;
}

.main-footer .pattern-layer .pattern-1{
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 193px;
  height: 540px;
  background-repeat: no-repeat;
}

.main-footer .pattern-layer .pattern-2{
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 209px;
  height: 550px;
  background-repeat: no-repeat;
}

.footer-bottom{
  padding: 30px 0px;
}

.footer-bottom p a{
  color: var(--theme-color);
}

.footer-bottom p a:hover{
  text-decoration: underline;
}


/** header-style-two **/

.header-style-two{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
}

.header-style-two.main-header .outer-box .logo-box{
  padding-left: 35px;
  padding-right: 35px;
}

.header-style-two .logo-box:before,
.header-style-two .logo-box:after{
  display: none;
}

.header-style-two .header-lower{
  background: #fff;
  padding-right: 40px;
}

.header-style-two .header-top{
  padding-right: 40px;
}

.nav-style-one .owl-nav button{
  position: relative;
  display: inline-block;
  width: 70px;
  height: 70px;
  line-height: 78px;
  background: #fff;
  text-align: center;
  font-size: 24px;
  color: var(--title-color);
  box-shadow: 0px 5px 40px 20px rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  transition: all 500ms ease;
}

.nav-style-one .owl-nav button:hover{
  color: #fff;
  background: var(--theme-color);
}

.list-style-one{
  position: relative;
  display: block;
}

.list-style-one li{
  position: relative;
  display: block;
  font-size: 16px;
  line-height: 30px;
  color: #222;
  font-weight: 500;
  padding-left: 30px;
  margin-bottom: 19px;
}

.list-style-one li:last-child{
  margin-bottom: 0px;
}

.list-style-one li:before{
  position: absolute;
  content: '\e91d';
  font-family: 'icomoon';
  font-size: 18px;
  left: 0px;
  top: 0px;
  font-weight: 400;
  color: var(--secondary-color);
}

.pt_115{
  padding-top: 115px;
}

.tabs-box .tab{
  position:relative;
  display:none;
  transition: all 900ms ease;
  -moz-transition: all 900ms ease;
  -webkit-transition: all 900ms ease;
  -ms-transition: all 900ms ease;
  -o-transition: all 900ms ease;
}

.tabs-box .tab.active-tab{
  display:block;  
}

.tabs-box .tab{
  transform:scale(0.9,0.9) translateY(0px);
}

.tabs-box .tab.active-tab{
  transform:scale(1) translateY(0px);
}


/** header-style-three **/

.header-style-three{
  position: relative;
  background: #fff;
}

.header-style-three .header-top .top-inner{
  padding-left: 40px;
  padding-right: 40px;
}

.main-header.header-style-three .outer-box .logo-box{
  background: transparent !important;
  margin-top: 0px;
  padding: 31px 0px;
}

.header-style-three .logo-box:before{
  display: none;
}

.header-style-three .outer-box .logo-box:after{
  display: none;
}

.main-header .menu-right-content .theme-btn.btn-two {
  color: #fff !important;
  border: none;
  background: var(--marquee-text-color);
  transition: opacity 0.3s ease;
  font-weight: bold;
}

.accordion-box .block .acc-content{
  display:none;
}

.accordion-box .block .acc-content.current{
  display:block;  
}

/* 1. Override center alignment & create left/right row */
.footer-bottom.centred { text-align: left; }
.footer-bottom .auto-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* 2. Match Quick Links spacing & force white text on contact */
.contact-widget .info-list li {
    margin-bottom: 10px; /* Matches .links-list li spacing */
    color: #ffffff;
}
.contact-widget .info-list li:last-child { margin-bottom: 0; }
.contact-widget .info-list li a { color: #ffffff; }
/* Social Media Brand Colors */
.main-footer .social-links li a.facebook {
    background: #1877F2 !important;
}

.main-footer .social-links li a.instagram {
    background: #E4405F !important;
}

.main-footer .social-links li a.whatsapp {
    background: #25D366 !important;
}

.main-footer .social-links li a.twitter {
	background: #1DA1F2 !important; 
}
.main-footer .social-links li a.tiktok {
    background: #000000 !important;
    color: #ffffff !important;
}
/* =========================================
   HEADER TOP MARQUEE TEXT
   ========================================= */
   
   .currency-marquee {
    font-family: var(--text-font);
    font-size: 16px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.currency-marquee b {
    color: #fedc62;
    font-weight: 600;
	font-size: 16px;
}

.marquee-content {
    display: inline-block;
    white-space: nowrap;
    animation: marquee-scroll 60s linear infinite;
}

.marquee-track {
    display: inline-flex;
    align-items: center;
}

.marquee-item {
    display: inline-flex;
    align-items: center;
    padding: 0 40px; /* Consistent spacing between items */
    white-space: nowrap;
}

.currency-flag {
    width: 24px;
    height: 16px;
    margin-right: 10px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Pause on hover */
.currency-marquee:hover .marquee-content {
    animation-play-state: paused;
}

/* =========================================
   DESKTOP & MOBILE HEADER FIXES
   ========================================= */

/* 1. Hide the 3 links after Contact on Desktop (≥992px) */
@media (min-width: 992px) {
    .main-menu .navigation > li.nav-mobile-only {
        display: none !important;
    }
}

/* 2. Mobile Top Bar Layout: Email Left, Phone Right (≤991px) */
@media screen and (max-width: 991px) {
    /* Remove heavy left padding & align items */
    .header-top .top-inner {
        padding-left: 15px !important;
        padding-right: 15px !important;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    /* Hide the extra links list in the top bar on mobile */
    .header-top .links-list {
        display: none !important;
    }

    /* Force contact info to take full width & split left/right */
    .header-top .info-list {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    /* Adjust spacing & sizing for mobile */
    .header-top .info-list li {
        margin: 0;
        padding-left: 18px;
        font-size: 16px;
        line-height: 1.4;
    }
    .header-top .info-list li i {
        font-size: 16px;
        top: 2px;
    }
}

.sdic-logo {
	max-width:260px; 
	width:100%; 
	margin-bottom:15px;
}
.sdic-logo-para {
	font-size:16px; 
	line-height:30px;
}

/* =========================================
MOBILE RATES & TENDER BUTTONS (Premium Shine Style)
========================================= */

/* 1. STRICTLY HIDE ON DESKTOP */
@media (min-width: 992px) {
    .mobile-quick-actions {
        display: none !important;
    }
}

/* 2. Mobile Styles */
@media (max-width: 991px) {
    .mobile-quick-actions {
        display: flex;
        gap: 5px;
        padding: 10px 10px;
        background: var(--dark-blue-color);
        margin-bottom: 2px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mobile-action-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 10px;
        font-size: 16px;
        font-weight: 700;
        font-family: var(--title-font);
        text-decoration: none !important;
        transition: all 0.3s ease;
        
        /* Essential for Shine Effect */
        position: relative;
        overflow: hidden; 
        border: none; /* Removed border for cleaner look */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

    /* The Shine Effect Element */
    .mobile-action-btn::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        /* White transparent gradient for the light sweep */
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.6), transparent);
        transform: skewX(-25deg);
        /* Animation settings */
        animation: shine-sweep 3s infinite;
    }

    /* Keyframes for the Shine */
    @keyframes shine-sweep {
        0% { left: -100%; }
        20% { left: 200%; } /* Moves quickly across */
        100% { left: 200%; } /* Waits before repeating */
    }

    /* Button Colors */
    .rates-btn {
        background: var(--secondary-color); /* Blue */
        color: #ffffff;
    }

    .tender-btn {
        background: var(--theme-color); /* Yellow */
        color: var(--title-color);
    }

    /* Hover Effect: Lift slightly */
    .mobile-action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
    }

    /* Touch Feedback: Press down */
    .mobile-action-btn:active {
        transform: scale(0.96);
    }
}

/* =========================================
   FIX: Top Header Active Link Style
   ========================================= */
.header-top .links-list li.current a {
    color: var(--theme-color) !important; /* This turns it Yellow */
    font-weight: 600;
}

/* Optional: Make the mobile menu items active too */
.main-menu .navigation > li.nav-mobile-only.current > a {
    color: var(--theme-color) !important;
    font-weight: 600;
}

/* Ensure the contact button aligns with site standards */
.contact-section .theme-btn {
    display: inline-block;
    padding: 18px 35px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    border: none;
    transition: all 500ms ease;
}

/* Ensure the button color isn't being overridden by form styles */
.contact-section button[type="submit"].theme-btn.btn-one {
    background: #0d1a3d!important;
    color: #fff !important;
}

.contact-section button[type="submit"].theme-btn.btn-one:hover {
    background: var(--secondary-color) !important;
}

/* =========================================
FIX: Force Quick Links & Business Menu Side-by-Side (Class Based)
========================================= */
@media (max-width: 991px) {
    .footer-side-by-side {
        width: 50% !important;
        flex: 0 0 50% !important;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        max-width: 50% !important;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .footer-side-by-side .ml_40 {
        margin-left: 0 !important;
    }
}

.theme-btn.btn-two:hover {
    background: #ed7723f5 !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.03);
    box-shadow:
        0 12px 30px rgba(11, 140, 249, 0.45),
        0 0 20px rgba(11, 140, 249, 0.35) !important;
}

.theme-btn.btn-one:hover {
    background: #1d3e97 !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.03);
    box-shadow:
        0 12px 30px rgba(255, 165, 0, 0.5),
        0 0 20px rgba(255, 165, 0, 0.4) !important;
}

/* =========================================
FIX: Footer Active Link Style
========================================= */

/* Target the correct class 'links-list' */
.main-footer .links-widget .links-list li.current a {
    color: var(--theme-color) !important;
    font-weight: 700 !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Also change the bullet dot color to match the active state */
.main-footer .links-widget .links-list li.current a:before {
    background: var(--theme-color) !important;
}

.main-footer .links-widget .links-list li.current a:hover {
    color: var(--theme-color) !important;
}

.footer-bottom .copyright a.ucobank_website {
    color: var(--orange-color) !important;
    font-weight: 600;
}

/* Fraud Alert Banner Styles */
.fraud-alert-banner {
    background: var(--orange-color);
    color: var(--text-color);
    padding: 12px 0;
    overflow: hidden;
    /* border-bottom: 3px solid #ff6f00; */
    width: 100%; /* Full width */
}

/* Remove auto-container restriction for full width */
.fraud-alert-banner .auto-container {
    max-width: 100%;
    padding: 0;
}

.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.marquee-content {
    display: inline-flex;
    animation: marquee 30s linear infinite; /* Slower: 30s instead of 20s */
    white-space: nowrap;
}

.marquee-content .alert-icon {
    margin: 0 15px;
    font-size: 16px;
    flex-shrink: 0;
}

.marquee-content .alert-text {
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.5px;
    /* text-transform: uppercase; */
    white-space: nowrap;
    margin-right: 30px;
	color: #cf1313;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Changed from -100% to -50% for seamless loop */
    }
}

/* Pause on hover */
.fraud-alert-banner:hover .marquee-content {
    animation-play-state: paused;
}

/* Responsive */
@media (max-width: 768px) {
    .fraud-alert-banner {
        padding: 10px 0;
    }
    .marquee-content .alert-text {
        font-size: 16px;
    }
    .marquee-content .alert-icon {
        margin: 0 10px;
    }
}

/* =========================================
   PAGE TITLE - MOBILE VIEW Hidden
   ========================================= */
@media screen and (max-width: 767px) {
    .page-title .content-box {
        display: none !important;  /* Completely removes from layout */
    }
    
    /* Also hide the bread-crumb if needed */
    .page-title .bread-crumb {
        display: none !important;
    }
    
    /* Optionally reduce padding on mobile */
    .page-title {
        padding: 100px 0 !important;
    }
}

/* =========================================
FIX: Mobile Menu Active Link Full Width Background
========================================= */
@media (max-width: 991px) {
    /* 1. Remove the existing left border indicator */
    .mobile-menu .navigation li.current > a:before {
        height: 0 !important;
        border-left: none !important;
        width: 0 !important;
    }

    /* 2. Apply full-width background color to the active link */
    .mobile-menu .navigation li.current > a {
        background: var(--theme-color) !important; /* You can change this to var(--secondary-color) or any hex code like #0b8cf9 */
        color: var(--title-color) !important; /* Ensures text remains readable (dark text on yellow bg) */
        font-weight: 700 !important;
    }
}