/*------------------------------------------------------------------
    Version: 1.0
-------------------------------------------------------------------*/


/*------------------------------------------------------------------
    [Table of contents]

    1. IMPORT FONTS
    2. IMPORT FILES
    3. SKELETON
    4. WP CORE
    5. HEADER
    6. SECTIONS
    7. SECTIONS
    8. PORTFOLIO
    9. TESTIMONIALS
    10. PRICING TABLES
    11. ICON BOXES
    12. MESSAGE BOXES
    13. FEATURES
    14. CONTACT
    15. FOOTER
    16. MISC
    17. BUTTONS
-------------------------------------------------------------------*/
@import url(my.css);

/*------------------------------------------------------------------
    IMPORT FONTS
-------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,900');

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400&display=swap');

@import url(' https://fonts.googleapis.com/css?family=Island Moments');

@import url('https://fonts.googleapis.com/css2?family=Stalemate&display=swap');

@import url('https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@0,400..700;1,400..700&family=Stalemate&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Romanesco&display=swap');

/*------------------------------------------------------------------
    IMPORT FILES
-------------------------------------------------------------------*/

@import url(css/animate.css);
@import url(css/flaticon.css);
@import url(css/icomoon.css);
@import url(css/prettyPhoto.css);
@import url(css/owl.carousel.css);
@import url(css/font-awesome.min.css);

/*------------------------------------------------------------------
    SKELETON
-------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');


/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);



.toggle,
[id^=drop] {
	display: none;
}

/* Giving a background-color to the nav container. */
nav { 
	margin:0;
	padding: 0;
	background-color: #ffffff;
}

/* .li a.active{
    color: #ffffff;
    box-shadow: 0 10px 20px 0 rgba(5, 16, 44, .15);
    border-radius: 25px 0px 25px 0px;
    background: #fd6802;
} */
nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: right;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	/* float: left; */
	background-color:  #ffffff;
	}

/* Styling the links */
nav a {
	display:block;
	
	padding:12px 16px;	
	color:#000000;
	font-size:18px;
	text-decoration:none;
}

.menu-3 li a {
    font-size: 20px;
}

/* nav ul li ul li:hover { background: #000000; } */

/* Background color change on Hover */
nav a:hover { 
	background-color: #ff9100; 
	color: white;
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 60px; 
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:170px;
	float:none;
	/* display:list-item; */
	position: relative;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:170px; 
}

	
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

	#logo {
		display: block;
		padding: 0;
		width: 100%;
		text-align: center;
		float: none;
	}

	nav {
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}

	.navbar .dropdown-toggle::after {
		border: none;
		content: "\f107";
		font-family: "Font Awesome 5 Free";
		font-weight: 600;
		font-size: 18px;
		vertical-align: middle;
		margin-left: 8px;
	}
	
	.dropdown .dropdown-menu a:hover {
		background: var(--bs-primary);
		color: var(--bs-white);
	}
	
	.navbar .nav-item:hover .dropdown-menu {
		transform: rotateX(0deg);
		visibility: visible;
		margin-top: 8px !important;
		background: var(--bs-light);
		transition: .5s;
		opacity: 1;
	}
	
	@media (min-width: 992px) {
		.navbar .nav-item .dropdown-menu {
		display: block;
		visibility: hidden;
		top: 100%;
		transform: rotateX(-75deg);
		transform-origin: 0% 0%;
		border: 0;
		border-radius: 10px;
		margin-top: 8px !important;
		transition: .5s;
		opacity: 0;
		}
	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		background-color: #fafafa;
		padding:16px 20px;	
		color:#FFF;
		font-size:18px;
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		background-color: #000000;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: #000000;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding:8px 16px;	
		color:#FFF;
		font-size:17px; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #e67a00; 
		color: white;
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		/* position:static; */
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}

}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 100%;
	}

}



/* -------------------------------------------------------faltu nav  --------------------------------------------*/

.dropbtn {
	/* background-color: #4CAF50; */
	/* background-color: #e67a00;  */
	color: rgb(0, 0, 0);
	background-color: transparent;
	padding: 16px;
	/* font-size: 16px; */
	border: none;
	/* cursor: pointer; */
	text-decoration:none;
	text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
	
  }

  .teks12 {
	/* background-color: #629552; */
	/* color: rgba(0,0,0,0.6); */
	text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
}



  .dropdown {
	/* color: #ffffff; */
	position: relative;
	display: inline-block;
	/* padding:8px 16px;	 */
	color:#FFF;
	font-size:17px; 
	
  }

  .dropdownli:focus a {
    color: #ffffff;
	box-shadow: 0 10px 20px 0 rgba(5, 16, 44, .15);
	border-radius: 25px 0px 25px 0px;
	background: #fd6802;
}

  /* .dropdown:hover{
	background-color: #ffffff;
  } */
  
  .dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
  }
  
  .dropdown-content a {
	color: rgb(0, 0, 0);
	padding: 12px 16px;
	text-decoration: none;
	display: block;
  }

  .a-a {
	color: rgb(0, 0, 0);
	padding: 12px 16px;
	text-decoration: none;
	display: block;
  }
  
  /* .dropdown-content a:hover {background-color: #e67a00} */
  
  .dropdown:hover .dropdown-content {
	display: block;
  }
  
  .dropdown:hover .dropbtn {
	background-color: #ff9100;
	color: #ffffff;
  }





  /*------------------------------------------------------------etc faltu navbar  */


  .topnav {
	overflow: hidden;
	background-color: #333;
  }
  
  .topnav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
  }
  
  .topnav a:hover {
	background-color: #e67a00;
	color: black;
  }
  
  .topnav a.active {
	background-color: #04AA6D;
	color: white;
  }
  
  .topnav .icon {
	display: none;
  }
  
  @media screen and (max-width: 600px) {
	.topnav a:not(:first-child) {display: none;}
	.topnav a.icon {
	  float: right;
	  display: block;
	}
  }
  
  @media screen and (max-width: 600px) {
	.topnav.responsive {position: relative;}
	.topnav.responsive .icon {
	  position: absolute;
	  right: 0;
	  top: 0;
	}
	.topnav.responsive a {
	  float: none;
	  display: block;
	  text-align: left;
	}
  }