/*
Theme Name: Mackolina child
Theme URI: 
Description: Child theme for mackolina.rs
Author: Dušan Belić
Author URI: https://www.linkedin.com/in/dusan-belic/
Template: Divi
Version: Updated for Divi 3+
*/

html body .container{
	width:90%
}
.mm-badge-first{
    position: absolute;
    background-color: rgba(255, 255, 255, .85);
    padding: 1.25rem;
    font-weight: bold;
    text-transform: uppercase;
	border-radius:25px;
    bottom: -42vh;
    left: -6vw;
	font-size:24px;
}

.mm-badge-first span,.mm-badge-second span{
	font-size:21px;
	margin-right:.5rem;
	color:#ff7bbc
}


.mm-badge-second{
    position: absolute;
    background-color: rgba(255, 255, 255, .85);
    padding:1.25rem;
    font-weight: bold;
    text-transform: uppercase;
	border-radius:25px;
	bottom: -50vh;
	right: 32vw;
	font-size:24px;
}

.mm-preporuka{
position: absolute;
	content:'Preporuka';
	position: absolute;
    top: 50%;
    left: 50%;
    padding: 8px 15px;
    background: #0b101e;
    color: #fff;
    font-size: 14px;
    letter-spacing: 2px;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    border-radius: 20px;
}
@media(max-width:960px){
	.mm-preporuka{
		font-size:12px;
		padding: 6px 10px;
	}
}

/* Mapa */
.mm-mapa{
	display:flex;
	flex-direction:column;
	align-items:center;
}
.mm-mapa .mm-element .mm-krug{
	border: solid 1px black;
	width: 35px;
	height: 35px;
	border-radius:50%;
}
.mm-elementi{
	display:flex;
	gap:2rem;
}
.mm-element{
	display:flex;
	gap:.5rem;
	align-items:center;
}
.mm-mapa .mm-element:first-child .mm-krug{
	background-color:green;
}
.mm-mapa .mm-element:nth-child(2) .mm-krug{
	background-color:yellow;
}
.mm-mapa .mm-element:last-child .mm-krug{
	background-color:red;
}

.mm-mapa-naslov{
	font-size:24px;
	font-weight:bold;
	margin-bottom:.75rem;
	color:black;
}
@media(max-width:960px){
	.mm-elementi{
		flex-wrap:wrap;
		justify-content:center;
		margin-top:1rem;
	}
	.mm-element{
		gap:.75rem;
	}
}
.mm-cena{
	font-size:24px;
	font-weight:bold;
	color:black;
}

.mm-paw-hero{
    position: absolute;
    background-color: rgba(255, 255, 255, .85);
    padding: 1.25rem;
    border-radius: 50%;
	right: 6rem;
    top: -25rem;
	transform: rotate(19deg);
}

.mm-paw-hero img{
	width:4rem;
}

.mm-paw-hero{
	animation: pawMove .85s infinite;
}

@keyframes pawMove {
  from {transform:scale(1.0) rotate(19deg);}
  50% {transform:scale(1.03) rotate(19deg);}
  to {transform:scale(1.0) rotate(19deg);}
}

@media(max-width:1920px){
	.mm-badge-first{
		bottom: -48vh;
		left: 6vw;
	}
	
	.mm-badge-second{
		bottom: -58vh;
		right: 28vw;
	}
}
@media(max-width:1680px){
	.mm-badge-first{
		bottom: -48vh;
		left: 18vw;
	}
	
	.mm-badge-second{
		bottom: -58vh;
		right: 26vw;
	}
}
@media(max-width:1440px){
	.mm-badge-first{
		bottom: -48vh;
		left: 20vw;
	}
	
	.mm-badge-second{
		bottom: -58vh;
		right: 24vw;
	}
	.mm-paw-hero{
		right:1rem;
		top:-27rem;
		padding:.85rem;
	}
}

@media(max-width:960px){
	.mm-paw-hero{
		right:-2rem;
		top:-29rem;
		padding:.85rem;
	}
	.mm-paw-hero img{
		width: 3rem;
	}
	
		.mm-badge-first{
			padding: .75rem;
			bottom: -36rem;
			left: 0rem;
			font-size: 17px;
		}

		.mm-badge-first span,.mm-badge-second span{
			font-size:17px;
		}


		.mm-badge-second{
			padding:.75rem;
			bottom:-41rem;
			right:2rem;
			font-size:17px;
		}
	
}

@media(max-width:760px){
	.mm-badge-first{
		font-size: 16px;
	}
	
	.mm-badge-second{
		right:1rem;
		font-size:16px;
	}
	.mm-paw-hero{
		display:none;
	}

}


@media(max-width:480px){

	.mm-badge-first, .mm-badge-second{
		left:-.75rem;
		font-size: 15px;
	}
	
	.mm-badge-second{
		bottom: -42rem;
	}
	.mm-badge-first{
		bottom:-37.5rem;
	}

}
/* Header */
.et-social-icons a:hover{
	opacity:1;
	color:black !important;
}
#et-info-phone a{
	transition: color .3s ease 0s;
}
#et-info-phone a:hover{
	color:black;
}
body.et_fixed_nav.et_secondary_nav_enabled #main-header{
	border-bottom: solid 1px #ff7bbc;
}

/* Carousel */
.owl-item .item{
	text-align:center;
	padding:2rem;
	border-radius:20px;
	border: solid 1px black;
	background-color: #fffaf5;
	margin-bottom:.5rem;
}
.mm-client-photo img{
	border-radius:50%;
	width:100px !important;
	margin: auto;
	margin-bottom:.75rem;
}

.mm-client-quote{
	color: #ff7bbc;
	font-size: 24px;
	font-weight: bold;
}

.mm-client{
	margin-top:.75rem;
}

.mm-client .mm-client-cat{
	font-size:18px;
	font-weight: bold;
}

.mm-client-translation{
	margin-top:.5rem;
}

/* menu */

#top-menu li > a:hover::after,#top-menu li.current_page_item > a::after {
	width: 100%;
	background: #FF7BBC;
  }
  
#top-menu-nav>ul>li>a:hover{
	opacity:1;
}
#top-menu li > a::after {
    content: "";
    display: block;
    margin: auto;
    height: 3px;
    width: 0;
    top: 6px;
    background: transparent;
    transition: all 0.3s;
    margin-top: -3px;
}

#top-menu li.current-menu-ancestor>a, #top-menu li.current-menu-item>a, #top-menu li.current_page_item>a{
	color:black !important;
}

/* Footer */

p.et_pb_contact_field{
	margin-bottom:5%
}


	/* Contact box */
	.contact-button-mobile{
		border: 0;
		bottom: 16px;
		border-radius: 100%;
		box-shadow: 3px 3px 10px rgba(0,0,0,.5);
		background: #ff7bbc;
		height: 72px;
		margin: 50px auto 0;
		opacity: 1;
		overflow: hidden;
		position: fixed;
		padding: 0;
		right: 16px;
		text-align: center;
		transition-duration: .3s;
		transition-property: bottom,right,opacity;
		transition-timing-function: ease;
		vertical-align: baseline;
		width: 72px;
		z-index: 10100000;
		padding:14px;
	}
	
	.contact-button-mobile:hover{
		cursor:pointer;
	}
	
	.contact-button-mobile.closed{
		display:none;
		opacity:0;
	}
	
	.contact-button-mobile > div{
			background: url(/wp-content/uploads/2024/06/phone-email.png);
			display: block;
			width:100%;
			height:100%;
			background-size:cover;
			background-repeat: no-repeat;
	}
	
	
	.contact-section-box{
	display: none;
		opacity: 0;
		z-index: 1000;
		overflow: hidden;
		position: fixed;
		max-height: 500px;
		bottom: -40px;
		right: 0;
		width: 100%;
		background: #fff;
		color: #414141;
		box-sizing: border-box;
		transition: all .2s ease-in;
		box-shadow: 0 5px 27px rgba(0,0,0,.28);
	padding:.5rem 1.25rem;
	}
	
	.contact-section-box.opened{
		opacity: 1;
		bottom: 0;
		right: 0;
		width: 100%;
		z-index: 10000012;
	}
	
	
	
	@media(min-width:960px){
		.contact-section-box.opened {
			bottom: 35px;
			right: 35px;
			width: 380px;
			border-radius:10px;
		}
		.contact-button-text{
			display:block;
		}
		.contact-button-mobile{
			color:white;
		}
	}
	
	@media(max-width:960px){
		.box-overlay{
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10000012;
		position: fixed;
		background-color: rgba(0,0,0,.3);
		display: none;
		}
		.contact-button-text{
		display:none;
		}
	}
	
	.contact-section-box a {
		border-bottom: 1px solid #d6d6d6;
		padding:1rem .25rem;
		position:relative;
		transition:background 450ms;
		display:flex;
	}
	
	.contact-section-box a:last-child{
		border:none;
	}
	
	.contact-section-box a:hover{
		background-color:#efefef;
	}
	
	.contact-section-box a::after{
		content:'>';
		position:absolute;
		right:.75rem;
		top:30%;
	}
	
	.contact-section-box a::before{
		content:'';
		position:relative;
		width:30px;
		height:30px;
		display:block;
		background-size: contain;
		margin-right:.75rem;
	}
	
	.call-option::before{
		background:url('/wp-content/uploads/2024/06/phone-pink.png');
	}
	
	.wa-option::before{
		background:url('/wp-content/uploads/2024/06/wa-pink.png');
	}
	
	
	.box-title{
		text-align:center;
		margin-top:1rem;
		font-size:1.5rem;
		margin-bottom:1rem;
	}
	.box-bottom-message{
		text-align:center;
		line-height:1.5rem;
		margin-top:.75rem;
	}
	.box-close-icon{
		font-size: 30px;
		font-weight: 400;
		transform-origin: 50% 50%;
		line-height: 10px;
		position: absolute;
		transform: rotate(45deg);
		right: 18px;
		top: 4px;
		z-index: 10;
		width: 10px;
		height: 10px;
		color: #414141;
		border-radius: 100%;
		padding: 10px;
	}
	
	.box-close-icon:hover{
		cursor:pointer;
	}
	
	.contact-section-options{
		display:flex;
		flex-direction:column;
		margin-bottom:.5rem;
	}
	
	.contact-section-content{
		position:relative;
	}
	


/* Jump load fix */
@media (min-width: 1680px) {
  body.et_fixed_nav.et_secondary_nav_enabled #main-header {
    top: 31px;
  }
  body.et_fixed_nav.et_secondary_nav_enabled.page-id-8678 #main-header {
    top: 0;
  }

  body.page-id-8678 #page-container {
    margin-top: 0 !important;
  }
  .et_fixed_nav.et_show_nav.et_secondary_nav_enabled #page-container {
    padding-top: 108px;
  }
}

@media (max-width: 560px) {
  body.et_fixed_nav.et_secondary_nav_enabled #main-header {
    top: 31px;
  }
  body.et_fixed_nav.et_secondary_nav_enabled.page-id-8678 #main-header {
    top: 0;
  }
  #page-container {
    padding-top: 110px !important;
  }

  body.page-id-8678 #page-container {
    padding-top: 79px !important;
  }
}
@media (max-width: 380px) {
  body.et_fixed_nav.et_secondary_nav_enabled #main-header {
    top: 87.3px;
  }
}

/* Kalkulator */

.calculator-container{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	width:600px;
	max-width:90%;
	margin:auto;
}

.calculator-container .form-group{
	width:100%;
	margin-bottom:1.25rem;
}

.calculator-container .form-group input,.calculator-container .form-group select{
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
}

.calculator-container .form-group input:focus, .calculator-container .form-group select:focus{
	border-color:#ff7bbc;
}

.calculator-container .form-group label{
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #ff7bbc;
}

.calculator-container button{
	font-size: 16px;
    background-color: #ff7bbc;
    border-color: rgba(255, 255, 255, 0);
    border-radius: 50px;
    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;
    text-decoration: none;
	color:white;
	padding: 1rem 1.5rem;
	transition: all 300ms ease 0ms;
}

.calculator-container button:hover{
	background-color:#ff6aab;
	cursor:pointer
}

.calculator-container #result{
    margin-top: 30px;
    padding: 20px;
    border-radius: 5px;
    background-color: #fffaf5;
    display: none;
	width:100%;
	border-radius:1.25rem;
}

.calculator-container .result-visible {
    display: block !important;
}

.calculator-container .result-header {
    font-weight: 600;
    color: #ff7bbc;
    margin-bottom: 10px;
    font-size: 18px;
	text-align:center;
}

.calculator-container .result-value {
    font-size: 2rem;
    color: #ff7bbc;
    font-weight: bold;
    text-align: center;
    margin: 15px 0;
}

.calculator-container .result-note {
    font-size: 14px;
    color: #777;
}

.result-note{
	line-height:1.4;
}