/* Css For Golden Answering Service */

/************ 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{
  --theme-color: linear-gradient(84.25deg, #EFBF04 0%, #FFAE2F 100%);
  --secondary-color: #1A1A1A;
  --text-color: #1A1A1A;
  --title-color: #1A1A1A;
  --text-font: "DM Sans", sans-serif;
  --title-font: "Space Grotesk", sans-serif;
}



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: 1680px;
  padding: 0px 15px;
  margin: 0 auto;
}

.container-fluid{
  padding: 0px;
}

.auto-container{
  position:static;
  max-width:1320px;
  padding:0px 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;
}

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


/* 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: #fff;
}

.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: 70px;
  line-height: 70px;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(0, 0, 0, 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: #000;
  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: #000;
}

.handle-preloader .animation-preloader .spinner{
  border: 3px solid #000;
  border-top-color: rgba(0, 0, 0, 0.3); 
}

/* 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: 5px;}
}


.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;
}

/** button **/


.theme-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.theme-btn .text{
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  font-size: 16px;
  line-height: 30px;
  font-weight: 700;
  font-family: var(--text-font);
  color: var(--title-color);
  text-align: center;
  border-radius: 50px;
  padding: 10px 30px;
  background: var(--theme-color);
  text-transform: uppercase;
  z-index: 1;
  transition: all 500ms ease;
}

.theme-btn .text:before{
  position: absolute;
  content: '';
  width: 0%;
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: -1;
  background: linear-gradient(84.25deg, #FFAE2F 0%, #EF721F 100%);
  transition: all 500ms ease;
}

.theme-btn:hover .text:before,
.theme-btn:hover .text:after{
  width: 100%;
}

.theme-btn:hover .text{
  color: #fff;
}

.theme-btn i{
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 12px;
  color: var(--title-color);
  background: var(--theme-color);
  border-radius: 50%;
  transition: all 500ms ease;
}

.theme-btn:hover i{
  color: #fff;
}


.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-family: var(--title-font);
  color: var(--title-color);
  font-weight: 500;
  height: 50px;
  width: 50px;
  line-height: 50px;
  background: #ffffff;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  z-index: 1;
  transition: all 500ms ease;
}

.pagination li a:hover,
.pagination li a.current{
  color: #fff;
}

.pagination li a i{
  position: relative;
  display: inline-block;
}

.sec-pad{
  padding: 142px 0px 150px 0px;
}

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

/** scroll-to-top **/

.scroll-to-top {
  position: fixed;
  left: 10px;
  bottom: 30px;
  height: 50px;
  width: 50px;
  cursor: pointer;
  display: block;
  box-shadow: inset 0 0 0 2px rgba(0,46,65,0.2);
  border-radius: 50%;
  z-index: 90000;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(15px);
  -ms-transform: translateY(15px);
  transform: translateY(15px);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.scroll-to-top.scroll-top-active {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0)
}

.scroll-to-top::after {
  position: absolute;
  content: "\f106";
  font-family: 'Font Awesome 5 Pro';
  text-align: center;
  line-height: 50px;
  font-size: 24px;
  background: var(--theme-color);
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 0;
  top: 0;
  height: 50px;
  width: 50px;
  cursor: pointer;
  display: block;
  z-index: 2;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear
}

.scroll-to-top:hover::after {
  
}

.scroll-to-top:hover::before {
  opacity: 1
}


.scroll-to-top .scroll-top-inner path {
  stroke-width: 4;
  fill: transparent;
  box-sizing: border-box;
  stroke: #EF721F;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}



@-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);
  }
}



.sec-title{
  position: relative;
  display: block;
}

.sub-title{
  position: relative;
  display: inline-block;
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.sec-title h2{
  position: relative;
  display: block;
  font-size: 50px;
  line-height: 50px;
  text-transform: capitalize;
}

.sec-title.light h2{
  color: #fff;
}





/*** 

====================================================================
                        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;
}

.nice-select{
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 16px;
  padding-right: 14px;
}

.nice-select:before{
  position: absolute;
  content: '\e913';
  font-family: 'icomoon';
  top: 1px;
  right: 25px;
  font-size: 8px;
}

.nice-select .list{
  width: 100%;
  left: 0px;
}

.nice-select .list li{
  color: var(--text-color);
}

.nice-select .list{
  max-height: 160px;
  overflow-x: hidden;
  overflow-y: auto;
}


.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: 12px;
  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: 12px;
  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;
}

.progress-box .bar{
  position:relative;
  width:100%;
  height:5px;
  background: #E5E5E5;
  border-radius: 30px;
}
  
.progress-box .bar-inner{
  position:relative;
  display:block;
  width:0px;
  height:5px;
  border-radius: 30px;
  background: var(--theme-color);
  -webkit-transition:all 1500ms ease;
  -ms-transition:all 1500ms ease;
  -o-transition:all 1500ms ease;
  -moz-transition:all 1500ms ease;
  transition:all 1500ms ease; 
}

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

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

.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);
}

.border-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 50%;
  -khtml-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.50);
  animation: squares 2.9s linear 0s infinite;
  -webkit-animation: squares 2.9s linear 0s infinite;
  -ms-animation: squares 2.9s linear 0s infinite;
  -o-animation: squares 2.9s linear 0s infinite;
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
  opacity: 0;
}

.border-animation.border-2 {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
}

.border-animation.border-3 {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}


/*** chat popup ***/

.chat-popup {
  position: fixed;
  right: -100%;
  bottom: 0px;
  width: 350px;
  z-index: 99999;
  visibility: hidden;
  opacity: 0;
  background: #fff;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10);
  border-radius: 10px;
  transition: all 0.5s ease-in-out 0.1s;
}

.chat-popup.popup-visible {
  right: 0px;
  visibility: visible;
  opacity: 1;
}

.chat-popup .popup-inner{
  position: relative;
  display: block;
  padding: 40px 30px;
  padding-top: 32px;
}

.chat-popup .close-chat{
  position: absolute;
  display: inline-block;
  left: 0px;
  top: -65px;
  width: 50px;
  height: 50px;
  line-height: 54px;
  text-align: center;
  border-radius: 50%;
  font-size: 16px;
  color: #fff;
  background: var(--theme-color);
  cursor: pointer;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
}

.chat-popup .popup-inner p{
  position: relative;
  display: block;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  margin-bottom: 40px;
}

.chat-popup .chat-form .form-group{
  position: relative;
  display: block;
  margin-bottom: 20px;
}

.chat-popup .chat-form .form-group:last-child{
  margin-bottom: 0px;
}

.chat-popup .chat-form .form-group input[type='text'],
.chat-popup .chat-form .form-group input[type='email'],
.chat-popup .chat-form .form-group textarea{
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  font-size: 13px;
  color: var(--text-color);
  padding: 10px 20px;
  transition: all 500ms ease;
}

.chat-popup .chat-form .form-group textarea{
  height: 120px;
  resize: none;
}

.chat-popup .chat-form .form-group input:focus,
.chat-popup .chat-form .form-group textarea:focus{
  border-color: #EF721F;
}

.chat-popup .chat-form .form-group .theme-btn{
  width: 100%;
}

.chat-icon{
  position: fixed;
  display: inline-block;
  right: 30px;
  bottom: 100px;
  z-index: 99;
}

.chat-icon button{
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 26px;
  color: #fff;
  background: var(--theme-color);
  border-radius: 50%;
}

.image-hov-one{
  position: relative;
  display: block;
  overflow: hidden;
}

.image-hov-one::before {
  background: rgba(255, 255, 255, 0.5);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}

.image-hov-one:hover::before {
  width: 100%;
  opacity: 0;
  -webkit-transition: all 400ms linear;
  transition: all 400ms linear;
}

.image-hov-two{
  position: relative;
  display: block;
  overflow: hidden;
}

.image-hov-two::before {
  background: rgba(255, 255, 255, 0.5);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1000%;
  height: 0%;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}

.image-hov-two:hover::before {
  height: 100%;
  opacity: 0;
  -webkit-transition: all 400ms linear;
  transition: all 400ms linear;
}



/*** Search Popup ***/

.search-popup {
  position: fixed;
  left: 0;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 99999;
  visibility: hidden;
  opacity: 0;
  overflow: auto;
  -webkit-transform: translateY(101%);
  -ms-transform: translateY(101%);
  transform: translateY(101%);
  transition: all 700ms ease;
  -moz-transition: all 700ms ease;
  -webkit-transition: all 700ms ease;
  -ms-transition: all 700ms ease;
  -o-transition: all 700ms ease;
}

.search-popup.popup-visible {
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  visibility: visible;
  opacity: 1;
}

.search-popup .popup-inner{
  width: 100%;
  background: rgba(0, 0, 0, 0.95);
  height: 100%;
}

.search-popup .upper-box{
  position: relative;
  padding: 70px 70px;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search-popup .upper-box .logo-box{
  max-width: 236px;
}

.search-popup .overlay-layer {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: block;
}

.search-popup .close-search {
  position: relative;
  font-size: 22px;
  color: #fff;
  cursor: pointer;
  z-index: 5;
  transition: all 500ms ease;
}

.search-popup .close-search:hover {
  color: red;
}

.search-popup .search-form {
  position: relative;
  width: 100%;
  padding: 100px 0px 250px 0px;
}

.search-popup .search-form .form-group{
  position: relative;
  margin: 0px;
}

.search-popup .search-form fieldset input[type="search"] {
  position: relative;
  height: 90px;
  padding: 20px 0px;
  background: transparent;
  line-height: 30px;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.70);
  border: none;
  font-weight: 400;
  border-radius: 0px;
  padding-right: 50px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.search-popup .search-form fieldset button[type="submit"] {
  position: absolute;
  top: 30px;
  right: 0px;
  cursor: pointer;
  font-size: 20px;
  color: #fff;
  transition: all 500ms ease;
}

.search-popup .search-form fieldset input[type="search"]:focus{
  border-color: var(--theme-color);
}

.search-popup .form-control:focus{
  box-shadow: none !important;
}

.search-popup .search-form fieldset input:focus + button,
.search-popup .search-form fieldset button:hover{
  
}

.gradient-color{
  background: var(--theme-color);
  color: transparent;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color: transparent;
}

.nav-style-one .owl-nav button{
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 52px;
  text-align: center;
  background: #fff;
  border-radius: 50%;
  font-size: 12px;
  color: var(--title-color);
  border: 1px solid var(--secondary-color);
  z-index: 1;
  transition: all 500ms ease;
}

.nav-style-one .owl-nav button.owl-prev{
  margin-right: 5px;
}

.nav-style-one .owl-nav button:hover{
  border-color: transparent;
}

.nav-style-one .owl-nav button:before{
  position: absolute;
  content: '';
  background: var(--theme-color);
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  left: -1px;
  top: -1px;
  z-index: -1;
  transform: scale(0,0);
  border-radius: 50%;
  transition: all 500ms ease;
}

.nav-style-one .owl-nav button:hover:before{
  transform: scale(1,1);
}

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

.list-style-one li{
  position: relative;
  display: block;
  padding-left: 28px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  margin-bottom: 8px;
}

.list-style-one li:before{
  position: absolute;
  content: '\e903';
  font-family: 'icomoon';
  font-size: 8px;
  left: 0px;
  top: 5px;
  color: #fff;
  background: var(--theme-color);
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
}

.block-shadow{
  position: relative;
  background: #fff;
  border: 1px solid #000;
  z-index: 1;
}

.block-shadow:after{
  position: absolute;
  content: '';
  background: #fff;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  border-radius: 30px;
  z-index: -1;
  transition: all 500ms ease;
}

.block-shadow:before{
  position: absolute;
  content: '';
  background: #000;
  width: calc(100% + 5px);
  height: calc(100% + 5px);
  left: 0px;
  top: 0px;
  border-radius: 30px 40px 34px 40px;
  z-index: -1;
  transition: all 500ms ease;
}

.zoom-fade{
  -webkit-animation: zoom-fade 5s infinite linear;
  animation: zoom-fade 5s infinite linear;
}

.bg-color-1{
  background: #1A1A1A;
}


.slide-text-outer{
  position: relative;
  background: #F2F2F2;
  padding: 40px 0px;
}

.slide-text-outer .text-box{
  position: relative;
  display: flex;
  align-items: center;
  gap: 120px;
  width: max-content;
  -moz-animation: scroll-left 600s linear infinite;
  -webkit-animation: scroll-left 600s linear infinite;
  animation: scroll-left 600s linear infinite;
}

.slide-text-outer .text-box li{
  position: relative;
  display: inline-block;
  font-size: 30px;
  line-height: 40px;
  font-family: var(--title-font);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--title-color);
  margin: 0px;
}

@-moz-keyframes scroll-left {
  0% { -moz-transform: translateX(0%); }
  100% { -moz-transform: translateX(-100%); }
}

@-webkit-keyframes scroll-left {
  0% { -webkit-transform: translateX(0%); }
  100% { -webkit-transform: translateX(-100%); }
}

.slide-text-outer .text-box li:before{
  position: absolute;
  content: '\e904';
  font-family: 'icomoon';
  font-size: 40px;
  top: 0px;
  right: -80px;
}

.slide-text-outer.light-section{
  background: #1A1A1A;
}

.slide-text-outer.light-section .text-box li{
  color: #fff;
}

.slide-text-outer.light-section .text-box li:before{
  background: var(--theme-color);
  color: transparent;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
}

.dots-style-one .owl-dots .owl-dot span{
  display: none !important;
}

.dots-style-one .owl-dots button{
  position: relative;
  display: inline-block;
  width: 40px;
  height: 7px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 10px;
  cursor: pointer;
  margin: 0px 5px;
  transition: all 500ms ease;
}

.dots-style-one .owl-dots button.active{
  box-shadow: 0px 1px 0px 0px #000;
}

.slide-text-section .slide-text-outer{
  overflow: hidden;
  border-radius: 30px;
  padding-left: 40px;
  padding-right: 40px;
}

.main-footer.radius_0 .outer-container,
.main-footer.radius_0 .outer-container .footer-top .bg-color{
  border-radius: 0px !important;
}

.main-footer .pattern-layer-3{
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 1300px;
  height: 1300px;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  margin: 0 auto;
}

.music-card {
  max-width: 900px;
  margin: auto;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  display: flex;
  flex-wrap: wrap;
}

.album-cover {
  flex: 1 1 300px;
  background-image: url('https://img.freepik.com/free-photo/young-female-operator-with-headphones_329181-8854.jpg?t=st=1744732063~exp=1744735663~hmac=5858be65f6065bce9c1effa0539bc5ce669d33b5ea9aadc9ca3aa4cf077ed1f1&w=996');
  background-size: cover;
  background-position: center;
  min-height: 300px;
}

.player-section {
  flex: 1 1 400px;
  background: #fff;
  padding: 2rem;
}

.track-list {
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 1rem;
}

.track {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background 0.2s;
}

.track:hover, .track.active {
  background-color: #f0f8ff;
  border-left: 3px solid #0d6efd;
}

.custom-audio {
  width: 100%;
}

.track-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}



/* Base table styles */
.pricing-section table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}
.pricing-section th,
.pricing-section td {
    padding: 12px 8px;
    text-align: center;
    vertical-align: middle;
}
.pricing-section th.feature-name {
    text-align: left;
    width: 25%;
}
.pricing-section td.checkmark {
    font-size: 14px;
}

/* Responsive adjustments for small screens */
@media (max-width: 768px) {
    .pricing-section table,
    .pricing-section thead,
    .pricing-section tbody,
    .pricing-section th,
    .pricing-section td,
    .pricing-section tr {
        display: block;
        width: 100%;
    }

    .pricing-section thead tr {
        display: none; /* hide header on mobile */
    }

    .pricing-section tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px;
    }


    .pricing-section td::before {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 45%;
        white-space: nowrap;
        font-weight: bold;
        content: attr(data-label);
    }

    .pricing-section h1, .pricing-section h2, .pricing-section h3 {
        font-size: 1.1rem;
    }

    .pricing-section p {
        font-size: 0.85rem;
    }

    .pricing-section .button {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
}


@media (max-width: 768px) {
  /* Ensure table cells display as blocks */
  table, thead, tbody, th, td, tr {
    display: block;
    width: 100%;
  }

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    margin-bottom: 1.5rem;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  }

  td {
    position: relative;
    padding-left: 50%;
    border: none;
    text-align: left;
    font-size: 0.95rem;
  }

  td::before {
    content: attr(data-label);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    color: #555;
    width: 45%;
    white-space: nowrap;
  }

  /* Buttons full width on mobile */
  .button {
    display: block !important;
    width: 100% !important;
    margin: 12px 0 0 0 !important;
    padding: 12px 0 !important;
    font-size: 1rem !important;
  }

  /* Show extra spacing for headers */
  th, .feature-name {
    display: block;
    text-align: left;
    padding: 12px 16px;
    font-size: 1rem;
  }
}




    /* Existing Table Styles */
    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      border: 2px solid #fda62d;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease-in-out;
      background: #fff;
    }

    table:hover {
      box-shadow: 0 16px 48px rgba(253, 166, 45, 0.25);
      border-color: #fda62d;
    }

    th {
      border-right: 1px solid #ffe5c0;
      border-bottom: 2px solid #ffe5c0;
      background: #fffbf4;
      color: #521C0D;
      font-weight: 700;
      padding: 18px 22px;
      text-align: center;
      font-size: 1rem;
      letter-spacing: 0.06em;
      user-select: none;
    }

    thead tr th:first-child {
      border-radius: 16px 0 0 0;
    }

    thead tr th:last-child {
      border-radius: 0 16px 0 0;
    }

    td {
      border-right: 1px solid #f3f3f3;
      border-top: 1px solid #f0f0f0;
      padding: 18px 22px;
      text-align: center;
      font-size: 1rem;
      color: #444;
    }

    td:last-child {
      border-right: none;
    }

    tr:hover td {
      background-color: #fdf7ee;
      transition: background-color 0.3s ease;
    }

    .feature-name {
      text-align: left;
      background: #fafafa;
      font-weight: 600;
      color: #333;
      border-right: 1px solid #f0f0f0;
    }

    .checkmark {
      color: #202020;
      font-weight: 700;
      font-size: 1.4rem;
      user-select: none;
      transition: transform 0.25s ease;
    }

    .checkmark:hover {
      transform: scale(1.2);
    }

    .button {
      display: inline-block;
      padding: 10px 26px;
      font-size: 1rem;
      font-weight: 600;
      color: #fff;
      background: #fda62d;
      border: none;
      border-radius: 30px;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(244, 131, 31, 0.4);
      transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
      text-align: center;
      text-decoration: none;
    }

    .button:hover, .button:focus {
      background-color: #d96204;
      box-shadow: 0 6px 18px rgba(217, 98, 4, 0.6);
      transform: translateY(-2px);
      outline: none;
    }

    .button:active {
      transform: translateY(0);
      box-shadow: 0 3px 10px rgba(217, 98, 4, 0.4);
    }

    /* Modal Styles */
    .modal-fullpage .modal-dialog {
      max-width: 70%;
      width: 100%;
      margin: 20px auto;
      height: calc(100vh - 40px);
    }

    .modal-fullpage .modal-content {
      border-radius: 16px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
      height: 100%;
      overflow-y: auto;
    }

    .modal-fullpage .modal-header {
      background: #fffbf4;
      border-bottom: 1px solid #f0f0f0;
      padding: 20px;
    }

    .modal-fullpage .modal-title {
      color: #521C0D;
      font-weight: 700;
      font-size: 1.8rem;
    }

    .modal-fullpage .modal-body {
      padding: 30px;
      background: #fff;
    }

    #planDetails h4 {
      color: #333;
      font-weight: 700;
      margin-bottom: 15px;
    }

    #planDetails p {
      color: #444;
      margin-bottom: 15px;
    }

    #planDetails .price {
      color: #fda62d;
      font-size: 1.8rem;
      font-weight: 600;
      margin-bottom: 20px;
    }

    #planDetails ul {
      list-style: none;
      padding: 0;
      margin-bottom: 20px;
    }

    #planDetails ul li {
      color: #444;
      margin-bottom: 10px;
      position: relative;
      padding-left: 25px;
      font-size: 1rem;
    }

    #planDetails ul li:before {
      content: "✔";
      color: #202020;
      position: absolute;
      left: 0;
      font-weight: 700;
    }

    .form-control {
      border: 1px solid #f0f0f0;
      border-radius: 8px;
      padding: 12px;
      font-size: 1rem;
    }

    .form-label {
      color: #333;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .plan-box {
      background: #fff;
      border: 1px solid #f0f0f0;
      border-radius: 12px;
      padding: 20px;
      margin: 10px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .plan-box:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    }

    .plan-box.active {
      border: 2px solid #fda62d;
    }

    .plan-box h4 {
      color: #333;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .plan-box p {
      color: #444;
      margin-bottom: 10px;
    }

    .plan-box .price {
      color: #fda62d;
      font-size: 1.5rem;
      font-weight: 600;
    }

    .plan-box ul {
      list-style: none;
      padding: 0;
      margin-bottom: 15px;
    }

    .plan-box ul li {
      color: #444;
      margin-bottom: 8px;
    }

    /* Responsive Styles */
    @media (max-width: 768px) {
      .modal-fullpage .modal-dialog {
        max-width: 100%;
        margin: 0;
        height: 100vh;
      }

      .modal-fullpage .modal-content {
        border-radius: 0;
      }

      table, thead, tbody, th, td, tr {
        display: block;
      }

      thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
      }

      tr {
        margin-bottom: 1.2rem;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        border-radius: 12px;
        background: #fff;
        padding: 16px;
      }

      td {
        position: relative;
        padding-left: 55%;
        border-top: none;
        text-align: left;
        font-size: 1rem;
        border-radius: 8px;
      }

      td::before {
        content: attr(data-label);
        position: absolute;
        left: 22px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 700;
        color: #555;
        white-space: nowrap;
        width: 45%;
      }

      .feature-name {
        background: transparent;
        border-right: none;
        padding-left: 22px;
      }
    }

.gradient-color {
    background: linear-gradient(90deg, #fda62d, #d96204);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-title {
    position: relative;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.pricing-section {
    background-color: #f8f9fa;
}

.tier-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.tab-btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: #521C0D;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    cursor: pointer;
    margin: 0 5px;
    transition: all 0.3s ease;
}

.tab-btn.active {
    background: #fda62d;
    color: #fff;
    border-color: #fda62d;
    box-shadow: 0 4px 12px rgba(244, 131, 31, 0.4);
}

.tab-btn:hover {
    background: #d96204;
    color: #fff;
    border-color: #d96204;
}