/*
Template:       ginger
Theme Name:     Ginger Child
Theme URI: 		http://wptf.themepul.com/restly
Author: 		Themepul
Author URI: 	http://themepul.com/
Description:    This Child Theme only for Restly Theme.
Version:        1.0.0
Text Domain:    restly-child
*/

select {
    background-color: #eff2f6;
    width: 100%;
    display: block;
    border: none;
    outline: none;
    background-color: #eff2f6;
    color: #454545;
    height: 67px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 4px;
    font-size: 15px;
}

.wpcf7-form-control.wpcf7 select {
    width: 500px;
}

.post-content .wp-block-paragraph a {
    color: #7003a9 !important;
}

.post-content .wp-block-paragraph a:hover,
.post-content .wp-block-paragraph a:hover * {
    color: #fbac5c !important;
}

 input:focus, select:focus, textarea:focus {
     border: 1px solid #5f3a80 ;
 }
 
input.wpcf7-form-control.wpcf7-submit {
    background-color:#5f3a80;
}

.restly-widget-banner-wrapper:after {
    background-color:#F05B6E!important;
}

.work-progress-item-five {
    min-height: 550px;
    max-height: 550px;
}

#copy .work-progress-item-five {
    min-height: 375px;
    max-height: 375px;
}

#price .work-progress-item-five {
    min-height: 325px;
    max-height: 325px;
}

#srednji .work-progress-item-five {
    min-height: 400px;
    max-height: 400px;
}

.calculator-btn {
    background-image: linear-gradient(129.22deg, #FBAC5C 0%, #FF5449 100%);
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    fill: #fff;
    font-size: 16px;
    line-height: 1;
    padding: 12px 24px;
    text-align: center;
    transition: all .3s;
}

.calculator-btn a:hover {
	color:#fff;
}

.forminator-ui#forminator-module-28368.forminator-design--material .forminator-pagination-progress .forminator-progress-bar span {
	background-color:#FBAC5C;
}
.bre-sub span {
    margin: 0 2px;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Sora';
}

.restly-portfolio-menu {
    font-family: 'Sora';  
}

.restly-portfolio-dec h6 a {
    line-height: 30px;
    font-size: 18px;
    font-weight: 700;
    font-family: 'Sora';
}
.elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
    background-color: #674486;
    padding: 12px; 
    border-radius: 4px;
    margin-right: calc(10px/2);
    margin-left: calc(10px/2);
    margin-top: calc(10px/2);
    margin-bottom: calc(10px/2); 
}




/* .restly-about-dec ul li:before {
content:"";
background-image: url(/wp-content/themes/ginger-child/assets/img/ShieldCheck.svg);
width: 35px;
height: 35px;
position: absolute;
left: 0;
top: 0;
} */

.restly-about-dec ul li:before {
    content: " ";
    background-image: url(https://www.gingeritsolutions.com/wp-content/themes/ginger-child/ShieldCheck.svg);
    position: absolute;
    opacity: 1;
    top: 0px;
    left: 0px;
    width: 45px;
    height: 45px;
    z-index: -1;
}

.restly-nft-wprcess .work-progress-item-five {
    background: none !important;
}

.theme-btns {
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 padding: 20px 10px;
 background: linear-gradient(89.12deg, #FBAC5C -29.5%, #FF5449 129.22%);
 border-radius: 8px;
 width: 145px;
 font-size: 15px;
}

div.wpforms-container-full .wpforms-form input[type=submit],div.wpforms-container-full .wpforms-form button[type=submit],div.wpforms-container-full .wpforms-form .wpforms-page-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 18px 25px 18px 25px;
    background: linear-gradient(89.12deg, #FBAC5C -29.5%, #FF5449 129.22%);
    border-radius: 8px;
    width: 145px;
    font-size: 16px;
    color:#fff;
}

div.wpforms-container-full .wpforms-form input[type=submit],div.wpforms-container-full .wpforms-form button[type=submit],div.wpforms-container-full .wpforms-form .wpforms-page-button .wpforms-submit .audit-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 18px 25px 18px 25px;
    background: linear-gradient(89.12deg, #FBAC5C -29.5%, #FF5449 129.22%);
    border-radius: 8px;
    width: 200px;
    font-size: 16px;
    color:#fff;
}

div.wpforms-container-full .wpforms-form .wpforms-field-label #wpforms-form-10084 {
color:#1D2C38;
}

div.wpforms-container-full .wpforms-form .wpforms-field-label #wpforms-form-20867 {
color:#fff!important;
}

div.wpforms-container-full .wpforms-form {
color:#7003a9!important;
}
div.wpforms-container-full .wpforms-form label.wpforms-error {
color:#FF5449;
}
div.wpforms-container-full .wpforms-form .wpforms-required-label {
color:#7003a9;
}
.free-audit-form {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
    word-break: break-word;
    word-wrap: break-word;
    color:#FBAC5C!important;
}
.free-audit-form span {
color:#FBAC5C!important;
}

.wpforms-confirmation-container-full, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message){
background:#88cd51;
}

.header-three.header-four .header-top ul li,
.header-three.header-four .header-top ul li span,
.header-three.header-four .header-top ul li a,
.header-three.header-four .office-time,
.header-three.header-four .office-time i {
    color: #ffffff;
}

::selection {
    background:#F05B6E;
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #402a58 #ffffff;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #402a58;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }

  .sidebar-widget-area .widget {
    background-color: #f8f9fa;
    margin-bottom: 40px;
    padding: 40px 30px;
    border-radius: 20px
}

button #wpforms-submit-10066 .wpforms-submit .audit-btn {
width: 200px;
}

button #wpforms-submit-12145 wpforms-submit {
color:#fff;
}

.woocommerce-pagination ul li span.page-numbers.current,
nav.navigation.pagination ul li a:hover,
nav.navigation.pagination ul li span.current,
.page-links span.current,
.page-links a:hover,
.pagination-area ul li a:hover,
.pagination-area ul li a.current,
nav.navigation.comments-pagination ul li span.page-numbers.current {
    background-color: #F05B6E!important; 
    color: #fff;
    border-color: transparent;
}
.main-menu ul li.mega ul li.current-menu-item a {
    color: #FBAC5C;
}

.main-menu ul li.no-mega ul li.current-menu-item a {
    color: #FBAC5C!important;
}
.tp-mobile-menu ul .tp-item-has-children>a:after {
display: none}

.tp-menu-toggle {
position: fixed;
}
.tp-menu-wrapper .tp-menu-area {
max-width:90%;
border-right: 3px solid #FBAC5C;
}
.tp-mobile-menu ul li a {
font-size: 16px;
}

.rank-math-breadcrumb {
color: #FBAC5C;
}

.rank-math-breadcrumb a {
color: #fff
}

.elementor-button-text {
font-family: 'Sora';
}

a.theme-btns2 {
font-family: 'Sora';
}

.restly-blog-post-author span.author.vcard a .restly-blog-post-author {
font-family: 'Sora';
}

.elementor-3827 .elementor-element.elementor-element-d84dde7 .restly-subscribe-innter .mc4wp-form-fields input[type=email] {
font-family: 'Sora';
}

.restly-blog-one .restly-blog-post-author{
font-family: 'Sora';
}

@media(max-width: 767px) {
.ft2-content a, .ft2-content span, .ft2-content {
font-size: 14px !important;
}
}


@media(max-width: 460px) {
h4.widget-title {
font-size: 22px;
}
}

@media(max-width: 460px) {
.ft2-content a, .ft2-content span, .ft2-content {
font-size: 14px !important;
}
}

@media(max-width: 767px) {
.company-info-widget .widget ul li a{
font-size: 14px;

}
	
#copy .work-progress-item-five {
    min-height: 300px;
    max-height: 300px;
}
	
}


@media(max-width: 1367px) {
.header-three .site-branding img {
    max-width: 120px;
}
.ms-4 {
margin-right: -4.5rem!important;
margin-left: -1rem!important;
}
.theme-btns {
width: 120px!important;
}
}

@media(max-width: 1400px) {
.header-three .site-branding img {
    max-width: 120px;
}
.ms-4 {
margin-right: -4.5rem!important;
margin-left: -0.5rem!important;
}
.theme-btns {
width: 120px!important;
}
}

.error-button-404 {
    display: flex;
    clear: both;
    margin-top: 40px;
    line-height: 4;
    justify-content: center;
}

.theme-btns-404 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 10px;
    background: linear-gradient(89.12deg, #7003A9 -29.5%, #FBAC5C 129.22%);
    border-radius: 8px;
    width: 250px;
    font-size: 15px;
    font-weight:600;
    color:#fff;	

}

.error-dec h2 {
line-height: 80px;
}

input.wpcf7-form-control.wpcf7-submit {
background: linear-gradient(89.12deg, #FBAC5C -29.5%, #FF5449 129.22%);
margin-top: 20px;
}

.wpcf7 form .wpcf7-response-output {
color:#fff;
}

.restly-service-two-box {
min-height: 280px !important;
}

.a span {
color:#FF5449 !important;
}

button wpforms-container-full .wpforms-form button[type=submit] {
    color: #fff!important;
}

div.wpforms-container-full .wpforms-form input[type=email] {
height:50px!important;
}

.grecaptcha-badge { 
    visibility: hidden !important;
}

.footer-two p {
opacity: 1 !important;
}
.footer-two .widget ul li a {
opacity:100% !important;
}
.footer-two .company-contact-widget ul li {
opacity:100% !important;
}

.footer-widgets-area .widget ul li a:hover {
    color: #fbac5c!important;
}
.widget ul li a:hover {
    color: #fbac5c!important;
}
.site-info a:hover {
    color: #fbac5c!important;
}
.social-icons a:hover {
    color: #fbac5c!important;
}



div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit], div.wpforms-container-full .wpforms-form .wpforms-page-button {
    color: #fff !important;
    border:none !important;
}
div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit] {
    background: linear-gradient(89.12deg, #7003A9 -29.5%, #FBAC5C 129.22%) !important;
}

div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit]:hover {
 transform: scale(1.1)
 transition: all 1s ease;
}

.ft2-content label {
    color: #fbac5c !important;
}

.mc4wp-form input[type="submit"] {
  color: #fff;
  background: linear-gradient(89.12deg, #7003A9 -29.5%, #FBAC5C 129.22%);	
  letter-spacing: 1px;
  font-size: 16px;
  line-height: 40px;
  border: none;
  transition: all 0.5s ease 0s;
  border-radius: 8px 8px 8px 8px;
  padding: 18px 25px 18px 25px;
  width: 200px;
}

.mc4wp-form input[type="text"],
.mc4wp-form input[type="email"] {
  line-height: 40px;
  font-family: 'Sora';
  font-size: 16px;
  color: #0c0c14;
  border-color: #7003a9 !important;
}
.mc4wp-form ::-webkit-input-placeholder { /* WebKit browsers */
	color: #888 !important;
}
.mc4wp-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: #888;
	opacity: 1;
}

.mc4wp-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #888;
	opacity: 1;
}

.mc4wp-form :-ms-input-placeholder { /* Internet Explorer 10+ */
	color: #888;
}

nav.navigation.post-navigation .nav-links .nav-previous a, nav.navigation.post-navigation .nav-links .nav-next a {
    font-size: 1em;
    font-weight: 600;
    font-family: Sora;
    text-transform: capitalize;
    position: relative;
    display: inline-block;
    line-height: 28px;
    width: 100%;
}

.post-tag-social .share-this-post ul li a {
    margin: 15%;
}

search.search-form {
	display: inline-flex;
    width: 100%;
}

button.search-submit{
	display:none;	
}
.elementor-widget-container h5 {
	display:none;
}

.wp-block-rank-math-toc-block ul,
ul ul,
ol,
ol ol,
ol ul,
ul ol {
    padding-left: 20px;
    padding-top: 8px;
}

.news-five-item .content .date {
    width: 140px;
    height: 60px;
    line-height: 1.2;
    padding-top: 10px;
    text-align: center;
    border-radius: 10px;
    background: #F43336;
    font-family: 'Sora';
    margin: 0px -10px auto auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 7px;
	color: #ffffff;
	
}


.news-five-item:hover{
  	transition: all 0.5s ease;
	transform: scale(1.03);

}

.post-content blockquote cite {
    font-size: 24px;
    font-style: italic;
    font-family: 'Sora';
    font-weight: 400;
}

.post-content p {
	font-size: 18px;
    font-family: 'Sora';
    font-weight: 400;
}

.post-content ul li {
	font-size: 18px;
    font-family: 'Sora';
}

.post-content blockquote p {
	font-size: 18px;
    font-style: italic;
    font-family: 'Sora';
    font-weight: 400;
}

blockquote a {
	color: #fbac5c;

}

.sticky-bar {
    backdrop-filter: blur(24px);
}

.ez-toc-widget-container ul.ez-toc-list li {
	line-height:2rem;
}


.page-layout  .right-sidebar {
    margin-top: 10rem;
}

.roller{
  height: 4.125rem;
  line-height: 4rem;
  position: relative;
  overflow: hidden; 
  width: 100%;
  /*display: flex;
  justify-content: center;
  align-items: center;
  */
  color: #fff;
}


#spare-time{
  font-size: 1rem;
  font-style: italic;
  letter-spacing: 1rem;
  margin-top: 0;
  color: #A8DADC;
  
}

.roller #rolltext {
  position: absolute;
  top: 0;
  animation: slide 8s infinite;  
}


.restly-list-wrapper {
    padding: 24px 6px 16px;
    border-left: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.restly-list-title {
    text-align: left;
}

.restly-price-footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.restly-pricing-warpper.restly-pricing-three>span  {
    font-family: 'Sora', sans-serif;
}



#wpforms-22608 .wpforms-submit,
#wpforms-23871 .wpforms-submit {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 18px 25px;
    background: linear-gradient(89.12deg, #FBAC5C -29.5%, #FF5449 129.22%);
    border-radius: 8px;
    font-size: 16px;
    color: #fff;
    height: 3rem;
    border: none;
    width: auto;
    max-width: 100%; /* sprečava prelazak širine ekrana */
    min-width: 250px; /* da ne bude premalo na desktopu */
    box-sizing: border-box;
}

.pdf .elementor-icon-box-content {
    background: hsla(280, 95%, 60%, 0.38);
    border-radius: 10px;
    padding: 15px; 
	max-width: 97%;
    transform: translateY(-20px);
	
}

.pdf .elementor-icon {
    border: 4px solid hsla(12, 39%, 32%, 1);
    position: relative;
    z-index: 1;
}

.lokacija .elementor-icon-box-content {
    background: hsla(280, 87%, 18%, 1);
    border-radius: 10px;
    padding: 15px; 
	max-width: 97%;
    transform: translateY(-20px);
	
}

.lokacija .elementor-icon {
    border: 4px solid hsla(280, 87%, 18%, 1);
    position: relative;
    z-index: 1;
}

.elementor-icon-box-description span {
    font-weight: 800;
}
.faq-accordion .accordion-button {
    text-align: left;
    font-size: 24px;
    font-weight: 700;
}

.accordion-collapse strong {
  color: #ffffff !important;
}

.post-navigation a .restly-nav-title  {
    position: relative;
    top: -1px !important;
    text-transform: none !important;
}

.elementor-widget-icon-box .elementor-icon-box-title span {
    color: #D78EFF;
}

.elementor-widget-container .zasto-kompanije span b {
	color: #D78EFF;
}


#wpforms-22608 input[type="email"],
#wpforms-22608 button[type="submit"] {
    min-width: 60%;
    box-sizing: border-box;
}


#wpforms-22608 input[type="email"] {
    border-radius: 10px;
}


.restly-counter {

}

.testimonial-four-active {
    display: flex;
    flex-direction: column;
}

.testimonial-four-item {
	width: 40rem;
	  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.testimonial-four-author {
	justify-content: flex-start;
	align-items: center;
	padding: 0 0px 20px 30px;
}
.testimonial-four-author-designation {
	padding: 0 0 0 10px;
}

.testimonial-four-author .testi4_title {
    margin-bottom: 0;
    font-size: 18px;
    font-weight: normal;
}

.testimonial-four-author img {
    max-width: 50px;
	max-height: 50px;
}

.testimonial-four-content {
    padding: 30px 40px 0px;
}

.testimonial-four-author:after {
	display:none;
}

.restly-testimonial-v4-wrapper .testimonial-four-active > .col-lg-4:nth-child(2) {
    transform: translateX(-80px);
}

.counter-new-icon {
	display: none;
}

#clutch {

backdrop-filter: blur(15px); 
margin-top: -106px;
}

.elementor-widget-video .elementor-wrapper iframe, .elementor-widget-video .elementor-wrapper video {
    background-color: #ffffff00;
}

@media screen and (max-width: 600px) {
 #clutch {
	 display:flex;
	 transform: translateY(-10px);
     margin: -20px 0 -30px 0;
	 background: #270339
}
.restly-counter {

}
	
.restly-testimonial-v4-wrapper .testimonial-four-active > .col-lg-4:nth-child(2) {
    transform: translateX(0px);
}
	
.testimonial-four-item {
width: 23rem;
	}
	
  #wpforms-22608 .wpforms-submit,
  #wpforms-23871 .wpforms-submit {
      width: 60%;
      min-width: unset;
  }
}

@keyframes slide {
  0%{
    top:0;
  }
  25%{
    top: -4rem;    
  }
  50%{
    top: -8rem;
  }
  72.5%{
    top: -12.25rem;
  }

}



@media screen and (max-width: 400px){
  h1{
  text-align:center;
  text-transform: uppercase;
  color: #FFF; 
  font-size: 2.125rem;
}
	
	.testimonial-four-item {
width: 18rem;
	}
  
  .roller{
  height: 2.6rem; 
  line-height: 2.125rem;  
  }
  
  #spare-time {
    font-size: 1rem;
    letter-spacing: 0.1rem;
  }
  
  .roller #rolltext {  
  animation: slide-mob 5s infinite;  
}
  
  @keyframes slide-mob {
  0%{
    top:0;
  }
  25%{
    top: -2.125rem;    
  }
  50%{
    top: -4.25rem;
  }
  72.5%{
    top: -6.375rem;
  }
}
}

@media screen and (max-width: 992px) {
    h1 {
        font-size: 28px !important;
        line-height: 40px !important;
    }
		
.testimonial-four-item {
width: 25rem;
	}
}

@media screen and (max-width: 992px) {
    h3 {
        font-size: 20px !important;
        line-height: 32px !important;
    }
}

@media screen and (max-width: 992px) {
    .breadcroumn-contnt h1 {
        font-size: 28px !important;
        line-height: 40px !important;
    }
}

@media screen and (max-width: 768px) {
    .author-info-inner {
        display:block;
    }
	.testimonial-four-item {
	width: 21rem;
   }
}

@media screen and (max-width: 768px) {
    .author-info-left {
        margin-bottom:12px;
    }
		.header-top {
	display:none;
	}
	.header-three .navbar-expand-lg {
	padding-top:30px;
	}
	#clutch {

	backdrop-filter: blur(15px); 
	margin-top: -30px;
	}
}
}


@media screen and (min-width: 1920px) {
    .restly-portfolio-item img {
        width: 760px;
    }
}

@media (max-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1280px;
    }
}

/* Prikaži toggle do 1179px */
@media (max-width: 1179px) {
  .tp-menu-toggle {
    display: inline-block !important;
  }
}

/* Sakrij toggle od 1180px naviše */
@media (min-width: 1180px) {
  .tp-menu-toggle {
    display: none !important;
  }
}

/* 992–1179: sakrij desktop meni (jer Bootstrap ga inače pali od 992) */
@media (min-width: 992px) and (max-width: 1179px) {
  .navbar-collapse.nav-menu.main-menu {
    display: none !important;
  }
}

/* od 1180px: prikaži desktop meni */
@media (min-width: 1180px) {
  .navbar-collapse.nav-menu.main-menu {
    display: inline-block !important; /* ili flex, ako ti treba */
  }
}

@media (min-width: 992px) and (max-width: 1179px) {
  #site-navigation .search-open {
    display: none !important;
  }
}


        .accordion-tabs-wrapper {
            width: 100%;
            margin: 0 auto;
        }

        .accordion-tabs-container {
            display: flex;
            height: 600px;
            max-height: 600px;
            background: linear-gradient(135deg, #1a0533 0%, #2d0a4e 50%, #1a0533 100%);
            position: relative;
            overflow: hidden;
        }

        /* Pozadinski efekat */
        .accordion-tabs-container::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                linear-gradient(rgba(138, 43, 226, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(138, 43, 226, 0.03) 1px, transparent 1px);
            background-size: 50px 50px;
            pointer-events: none;
            z-index: 1;
        }

        /* Svetleći stubovi */
        .light-pillar {
            position: absolute;
            width: 8px;
            height: 100%;
            background: linear-gradient(to bottom, 
                rgba(255, 107, 53, 0) 0%, 
                rgba(255, 107, 53, 0.8) 50%, 
                rgba(255, 107, 53, 0) 100%);
            filter: blur(4px);
            animation: pillarPulse 3s ease-in-out infinite;
            z-index: 2;
        }

        .light-pillar:nth-child(1) {
            right: 120px;
            animation-delay: 0s;
        }

        .light-pillar:nth-child(2) {
            right: 140px;
            animation-delay: 0.3s;
            height: 80%;
            top: 10%;
        }

        .light-pillar:nth-child(3) {
            right: 160px;
            animation-delay: 0.6s;
        }

        @keyframes pillarPulse {
            0%, 100% { opacity: 0.6; transform: scaleY(1); }
            50% { opacity: 1; transform: scaleY(0.95); }
        }

        /* Accordion panel */
        .accordion-panel {
            flex: 0 0 80px;
            min-width: 80px;
            position: relative;
            transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            overflow: hidden;
            border-right: 1px solid rgba(255, 255, 255, 0.05);
            z-index: 3;
        }

        .accordion-panel:hover {
            flex: 1 1 600px !important;
            z-index: 5;
        }

        /* Pozadinska slika */
        .panel-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            transition: transform 0.6s ease;
            z-index: 1;
        }

        .accordion-panel:hover .panel-background {
            transform: scale(1.05);
        }

        .panel-background::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, 
                rgba(26, 5, 51, 0.75) 0%, 
                rgba(45, 10, 78, 0.65) 50%, 
                rgba(26, 5, 51, 0.75) 100%);
            transition: background 0.6s ease;
        }

        .accordion-panel:hover .panel-background::after {
            background: linear-gradient(135deg, 
                rgba(26, 5, 51, 0.5) 0%, 
                rgba(45, 10, 78, 0.4) 50%, 
                rgba(26, 5, 51, 0.5) 100%);
        }

        /* Tab label - vertikalni tekst */
        .panel-label {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            writing-mode: vertical-rl;
            color: rgba(255, 255, 255, 0.6);
            font-size: 16px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 3px;
            white-space: nowrap;
            transition: opacity 0.4s ease;
            z-index: 3;
            pointer-events: none;
            text-align: center;
        }

        .accordion-panel:hover .panel-label {
            opacity: 0;
        }
        
        /* Poslednji panel - label uvek skriven */
        .accordion-panel:last-of-type .panel-label {
            opacity: 0;
        }
        
        /* Kada se drugi panel hover-uje, poslednji prikaže label */
        .accordion-panel:hover ~ .accordion-panel:last-of-type .panel-label {
            opacity: 0.6;
        }

        /* Sadržaj panela */
        .panel-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 60px 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            opacity: 0;
            transform: translateX(-30px);
            transition: opacity 0.4s cubic-bezier(0.4, 0, 1, 1) 0s,
                        transform 0.4s cubic-bezier(0.4, 0, 1, 1) 0s;
            z-index: 4;
            pointer-events: none;
        }

        .accordion-panel:hover .panel-content {
            opacity: 1;
            transform: translateX(0);
            pointer-events: auto;
            transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s,
                        transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
        }
        
        /* Poslednji panel uvek ima vidljiv sadržaj */
        .accordion-panel:last-of-type .panel-content {
            opacity: 1;
            transform: translateX(0);
            pointer-events: auto;
        }
        
        /* Kada se drugi panel hover-uje, poslednji sakriva sadržaj */
        .accordion-panel:hover ~ .accordion-panel:last-of-type .panel-content {
            opacity: 0;
            transform: translateX(-30px);
            pointer-events: none;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 1, 1) 0s,
                        transform 0.4s cubic-bezier(0.4, 0, 1, 1) 0s;
        }

        .panel-content h2 {
            font-size: 48px;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #fff 0%, #ffa07a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.2;
            font-weight: 700;
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
        }
        
        .accordion-panel:hover .panel-content h2 {
            transform: translateY(0);
            opacity: 1;
            transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
        }
        
        .accordion-panel:last-of-type .panel-content h2 {
            transform: translateY(0);
            opacity: 1;
        }
        
        .accordion-panel:hover ~ .accordion-panel:last-of-type .panel-content h2 {
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
        }

        .panel-content p {
            font-size: 17px;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 30px;
            max-width: 500px;
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
        }
        
        .accordion-panel:hover .panel-content p {
            transform: translateY(0);
            opacity: 1;
            transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
        }
        
        .accordion-panel:last-of-type .panel-content p {
            transform: translateY(0);
            opacity: 1;
        }
        
        .accordion-panel:hover ~ .accordion-panel:last-of-type .panel-content p {
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
        }

        .panel-content .cta-button {
            display: inline-block;
            padding: 14px 32px;
            background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
            color: white;
            text-decoration: none;
            border-radius: 50px;
            font-weight: 600;
            font-size: 14px;
            box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3);
            align-self: flex-start;
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s,
                        box-shadow 0.3s ease;
        }
        
        .accordion-panel:hover .panel-content .cta-button {
            transform: translateY(0);
            opacity: 1;
            transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s,
                        box-shadow 0.3s ease;
        }
        
        .accordion-panel:last-of-type .panel-content .cta-button {
            transform: translateY(0);
            opacity: 1;
        }
        
        .accordion-panel:hover ~ .accordion-panel:last-of-type .panel-content .cta-button {
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
        }

        .panel-content .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 40px rgba(255, 107, 53, 0.6);
        }

        /* Accent line na dnu */
        .panel-accent {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(to right, #ff6b35, #f7931e);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 5;
        }

        .accordion-panel:hover .panel-accent {
            transform: scaleX(1);
        }
        
        /* Poslednji panel - accent uvek aktivan */
        .accordion-panel:last-of-type .panel-accent {
            transform: scaleX(1);
        }
        
        /* Kada se drugi panel hover-uje, poslednji sakriva accent */
        .accordion-panel:hover ~ .accordion-panel:last-of-type .panel-accent {
            transform: scaleX(0);
        }

        /* Laptop ilustracija - pojavjuje se samo na prvom panelu */
        .laptop-illustration {
            position: absolute;
            right: 60px;
            top: 50%;
            transform: translateY(-50%);
            width: 400px;
            perspective: 1000px;
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 1, 1) 0s;
            z-index: 10;
        }

        .accordion-panel:hover .laptop-illustration {
            opacity: 1;
            transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
        }
        
        /* Poslednji panel uvek ima vidljiv laptop */
        .accordion-panel:last-of-type .laptop-illustration {
            opacity: 1;
        }
        
        /* Kada se drugi panel hover-uje, poslednji sakriva laptop */
        .accordion-panel:hover ~ .accordion-panel:last-of-type .laptop-illustration {
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 1, 1) 0s;
        }

        .laptop-screen-wrapper {
            position: relative;
            transform: rotateY(-15deg);
        }

        .laptop-screen {
            width: 100%;
            height: 280px;
            background: #1a1a1a;
            border-radius: 12px 12px 4px 4px;
            padding: 12px;
            box-shadow: 
                0 30px 80px rgba(0, 0, 0, 0.6),
                inset 0 0 0 2px rgba(255, 255, 255, 0.05);
            position: relative;
        }

        .screen-content {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
            border-radius: 6px;
            position: relative;
            overflow: hidden;
        }

        .screen-content::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.08) 50%, transparent 70%);
            animation: shine 4s infinite;
        }

        @keyframes shine {
            0%, 100% { transform: translateX(-100%) translateY(-100%); }
            50% { transform: translateX(100%) translateY(100%); }
        }

        .laptop-base {
            width: 440px;
            height: 12px;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
            border-radius: 0 0 80px 80px;
            margin: 0 auto;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .accordion-tabs-container {
                height: auto;
                min-height: 600px;
            }

            .panel-content {
                padding: 40px 50px;
            }

            .panel-content h2 {
                font-size: 36px;
            }

            .laptop-illustration {
                width: 320px;
                right: 40px;
            }

            .laptop-screen {
                height: 220px;
            }

            .laptop-base {
                width: 350px;
            }
        }

        @media (max-width: 768px) {
            .accordion-tabs-container {
                flex-direction: column;
                height: auto;
                min-height: auto;
            }

            .accordion-panel {
                flex: 0 0 80px !important;
                min-width: auto !important;
                min-height: 80px;
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
                transition: flex 0.5s ease, min-height 0.5s ease;
            }

            .accordion-panel:hover {
                flex: 0 0 400px !important;
                min-height: 400px;
            }

            .accordion-panel:first-of-type {
                flex: 0 0 400px !important;
                min-height: 400px;
            }
            
            .accordion-panel:last-of-type {
                flex: 0 0 400px !important;
                min-height: 400px;
            }

            .panel-label {
                writing-mode: horizontal-tb;
                transform: none !important;
                left: 30px;
                top: 50%;
                transform: translateY(-50%) !important;
                opacity: 0;
            }
            
            .accordion-panel:not(:first-of-type) .panel-label {
                opacity: 0.6;
            }

            .accordion-panel:hover .panel-label {
                opacity: 0;
                transform: translateY(-50%) translateX(-20px) !important;
            }

            .accordion-panel:first-of-type .panel-label,
            .accordion-panel:last-of-type .panel-label {
                opacity: 0;
            }

            .panel-content {
                padding: 30px 20px;
            }

            .panel-content h2 {
                font-size: 28px;
            }

            .panel-content p {
                font-size: 15px;
                max-width: 100%;
            }

            .laptop-illustration {
                display: none;
            }

            .light-pillar {
                display: none;
            }
        }


#mainmenu {
	display: flex;
	justify-content: center;
}