/*---------------------------------------------------------------------------------

 Theme Name:   Banana_code
 Theme URI:    https://banana.com.hr
 Description:  Banana Code custom Theme
 Author:       Banana_code
 Author URI:   https://banana.com.hr
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

------------------------------ ADDITIONAL CSS HERE ------------------------------*/



ul.sub-menu { 
border-radius:12px;
}


.gradient-overlay:before {
    content: "";
    position: absolute;
    z-index: 1;
    background: inherit;
    top: 0;
    bottom: 0;
    width: 100%;
}



/* ==========================================
   KONTAKT CTA GUMB U DESKTOP MENIJU
========================================== */

@media all and (min-width: 981px) {

    .kontakt a {
        position: relative;
        display: block;
        overflow: hidden;

        padding: 18px 32px !important;

        color: #ffffff !important;
        background-color: #629abf !important;
        border: 1px solid #629abf !important;
        border-radius: 8px !important;

        font-size: 14px !important;
        line-height: 1 !important;
        font-weight: 600;
        text-align: center;
        text-transform: uppercase;

        opacity: 1 !important;

        box-shadow:
            0 14px 30px rgba(98, 154, 191, 0.28);

        transition:
            color 350ms ease,
            background-color 350ms ease,
            border-color 350ms ease,
            box-shadow 350ms ease,
            transform 350ms cubic-bezier(.2, .8, .2, 1);
    }

    /*
     * Svjetlosni shimmer efekt.
     */
    .kontakt a::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -50%;

        width: 38%;
        pointer-events: none;
        opacity: 0;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.28),
                transparent
            );

        transform: skewX(-24deg);

        transition:
            left 650ms cubic-bezier(.2, .8, .2, 1),
            opacity 300ms ease;
    }

    .kontakt a:hover,
    .kontakt a:focus {
        color: #ffffff !important;
        background-color: #477b9e !important;
        border-color: #82b5d6 !important;

        opacity: 1 !important;
        transform: translateY(-3px);

        box-shadow:
            0 19px 42px rgba(98, 154, 191, 0.40);
    }

    .kontakt a:hover::before,
    .kontakt a:focus::before {
        left: 125%;
        opacity: 1;
    }

    .kontakt a:focus-visible {
        outline: 2px solid #82b5d6;
        outline-offset: 4px;
    }
}


/* ==========================================
   PORAVNANJE DESKTOP MENIJA
========================================== */

.et_pb_menu--with-logo
.et_pb_menu__menu > nav > ul > li > a {
    padding-top: 0;
    padding-bottom: 0;
    color: #000000;
}

.et_pb_menu
.et_pb_menu__menu > nav > ul > li {
    align-items: center;
}


/* ==========================================
   SMANJENO KRETANJE
========================================== */

@media (prefers-reduced-motion: reduce) {

    .kontakt a,
    .kontakt a::before {
        transition: none !important;
    }

    .kontakt a:hover,
    .kontakt a:focus {
        transform: none !important;
    }
}







/*MOBILE MENU CSS */



/* X icon in expanded mobile menu */
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
}
/* Remove the top line in the mobile menu*/
.et_mobile_menu {
border-top:0;
}
/* Center-align moble menu items */
.et_mobile_menu li {
text-align:center !important;
}
  
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0 !important;
}
/* Make mobile menu fullwidth */
.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}

/* Remove the animation to avoid delay */
.mobile_nav.opened .et_mobile_menu {
display:block !important;
}


et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after{
content: '\4d';
}
.second-level {
display: none;
}
.reveal-items {
display: block;
}
.et_mobile_menu {
margin-top: 2px;
width: 230%;
margin-left: -65%;
}


.et_mobile_menu li a {

    padding: 8px 5%;

}

.et_mobile_menu li a {
    border-bottom: 0px solid rgba(0,0,0,.00);
    color: #000;
    padding: 10px 5%;
    display: block;
}

/*END MOBILE MENU CSS */




/*set the Divi menu dropdown auto width*/
@media only screen and (min-width: 981px) {
	.nav li ul {
		width: fit-content;
		display: flex;
		flex-direction: column;
	}
	.nav li li {
		white-space: nowrap;
	}
	.nav li li a {
		width: auto !important;
	}
}




















.wpforms-form button[type=submit] {
    float: right;
    color: #FFFFFF!important;
    border-width: 1px!important;
    border-color: #e02b20!important;
    border-radius: 0px!important;
    font-size: 15px!important;
    font-family: 'Roboto', sans-serif!important;
    text-transform: uppercase!important;
    background-color: #e02b20!important;
    min-width: 290px;
}

.wpforms-field-label {
 font-family: 'Roboto', sans-serif!important;	
}

.wpforms-form input[type=text] {
 font-family: 'Roboto', sans-serif!important;		
}

.et_pb_button_0_tb_header:before {
    animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    transform-origin: 50% 50%;
    }
    
    @-webkit-keyframes phonering-alo-circle-img-anim {
        0% {
            -webkit-transform:rotate(0) scale(1) skew(1deg)
        }
    
        10% {
            -webkit-transform:rotate(-25deg) scale(1) skew(1deg)
        }
    
        20% {
            -webkit-transform:rotate(25deg) scale(1) skew(1deg)
        }
    
        30% {
            -webkit-transform:rotate(-25deg) scale(1) skew(1deg)
        }
    
        40% {
            -webkit-transform:rotate(25deg) scale(1) skew(1deg)
        }
    
        50% {
            -webkit-transform:rotate(0) scale(1) skew(1deg)
        }
    
        100% {
            -webkit-transform:rotate(0) scale(1) skew(1deg)
        }
    }

    @-webkit-keyframes phonering-alo-circle-img-anim {
        0% {
            -webkit-transform:rotate(0) scale(1) skew(1deg);
                    transform:rotate(0) scale(1) skew(1deg)
        }
    
        10% {
            -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
                    transform:rotate(-25deg) scale(1) skew(1deg)
        }
    
        20% {
            -webkit-transform:rotate(25deg) scale(1) skew(1deg);
                    transform:rotate(25deg) scale(1) skew(1deg)
        }
    
        30% {
            -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
                    transform:rotate(-25deg) scale(1) skew(1deg)
        }
    
        40% {
            -webkit-transform:rotate(25deg) scale(1) skew(1deg);
                    transform:rotate(25deg) scale(1) skew(1deg)
        }
    
        50% {
            -webkit-transform:rotate(0) scale(1) skew(1deg);
                    transform:rotate(0) scale(1) skew(1deg)
        }
    
        100% {
            -webkit-transform:rotate(0) scale(1) skew(1deg);
                    transform:rotate(0) scale(1) skew(1deg)
        }
    }
    
    @keyframes phonering-alo-circle-img-anim {
        0% {
            -webkit-transform:rotate(0) scale(1) skew(1deg);
                    transform:rotate(0) scale(1) skew(1deg)
        }
    
        10% {
            -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
                    transform:rotate(-25deg) scale(1) skew(1deg)
        }
    
        20% {
            -webkit-transform:rotate(25deg) scale(1) skew(1deg);
                    transform:rotate(25deg) scale(1) skew(1deg)
        }
    
        30% {
            -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
                    transform:rotate(-25deg) scale(1) skew(1deg)
        }
    
        40% {
            -webkit-transform:rotate(25deg) scale(1) skew(1deg);
                    transform:rotate(25deg) scale(1) skew(1deg)
        }
    
        50% {
            -webkit-transform:rotate(0) scale(1) skew(1deg);
                    transform:rotate(0) scale(1) skew(1deg)
        }
    
        100% {
            -webkit-transform:rotate(0) scale(1) skew(1deg);
                    transform:rotate(0) scale(1) skew(1deg)
        }
}




















/*OLD*/

.wpforms-form button[type=submit] {
    color: #fff!important;
    background-color: #262d3f!important;
      font-size: 16px!important;
    float:right!important;
min-width:280px;
	border-radius:30px!important;
	background: linear-gradient(0deg, rgba(38,45,63,1) 0%, rgba(99,156,193,1) 100%)!important;
	 box-shadow: 6px 6px 18px 0px rgba(0, 0, 0, 0.3);
	border: 2px solid #fff!important;
    
    
    
    }
    
    .wpforms-form button[type=submit]:hover {
      
      color: #fff!important; /* Change hover button text color here */
       background: linear-gradient(0deg, rgba(99,156,193,1) 0%, rgba(99,156,193,1) 100%)!important;
    
    
    }



.et_pb_button_0_tb_header:before {
    animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    transform-origin: 50% 50%;
    }
    
    @-webkit-keyframes phonering-alo-circle-img-anim {
        0% {
            -webkit-transform:rotate(0) scale(1) skew(1deg)
        }
    
        10% {
            -webkit-transform:rotate(-25deg) scale(1) skew(1deg)
        }
    
        20% {
            -webkit-transform:rotate(25deg) scale(1) skew(1deg)
        }
    
        30% {
            -webkit-transform:rotate(-25deg) scale(1) skew(1deg)
        }
    
        40% {
            -webkit-transform:rotate(25deg) scale(1) skew(1deg)
        }
    
        50% {
            -webkit-transform:rotate(0) scale(1) skew(1deg)
        }
    
        100% {
            -webkit-transform:rotate(0) scale(1) skew(1deg)
        }
    }

    @-webkit-keyframes phonering-alo-circle-img-anim {
        0% {
            -webkit-transform:rotate(0) scale(1) skew(1deg);
                    transform:rotate(0) scale(1) skew(1deg)
        }
    
        10% {
            -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
                    transform:rotate(-25deg) scale(1) skew(1deg)
        }
    
        20% {
            -webkit-transform:rotate(25deg) scale(1) skew(1deg);
                    transform:rotate(25deg) scale(1) skew(1deg)
        }
    
        30% {
            -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
                    transform:rotate(-25deg) scale(1) skew(1deg)
        }
    
        40% {
            -webkit-transform:rotate(25deg) scale(1) skew(1deg);
                    transform:rotate(25deg) scale(1) skew(1deg)
        }
    
        50% {
            -webkit-transform:rotate(0) scale(1) skew(1deg);
                    transform:rotate(0) scale(1) skew(1deg)
        }
    
        100% {
            -webkit-transform:rotate(0) scale(1) skew(1deg);
                    transform:rotate(0) scale(1) skew(1deg)
        }
    }
    
    @keyframes phonering-alo-circle-img-anim {
        0% {
            -webkit-transform:rotate(0) scale(1) skew(1deg);
                    transform:rotate(0) scale(1) skew(1deg)
        }
    
        10% {
            -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
                    transform:rotate(-25deg) scale(1) skew(1deg)
        }
    
        20% {
            -webkit-transform:rotate(25deg) scale(1) skew(1deg);
                    transform:rotate(25deg) scale(1) skew(1deg)
        }
    
        30% {
            -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
                    transform:rotate(-25deg) scale(1) skew(1deg)
        }
    
        40% {
            -webkit-transform:rotate(25deg) scale(1) skew(1deg);
                    transform:rotate(25deg) scale(1) skew(1deg)
        }
    
        50% {
            -webkit-transform:rotate(0) scale(1) skew(1deg);
                    transform:rotate(0) scale(1) skew(1deg)
        }
    
        100% {
            -webkit-transform:rotate(0) scale(1) skew(1deg);
                    transform:rotate(0) scale(1) skew(1deg)
        }
}