@charset "utf-8";
/* CSS Document */
*{
	margin:0;
	padding:0;
	box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
	}
	
body{
	
	background-color:#CCCCCC;
	color: 000;
	}
	
 .bg-light-grey{

	 background-color:#36454F; /*Charcoal*/
	 
	 }
.bg-charcoal{
	 background-color:#36454F; /*Charcoal*/
	 }
 .bg-Davy-s-Gray{
	 background-color:#555555; /*Davy's Gray*/

	 }
 .bg-gray-cloud{
	 background-color:#B6B6B4; /*gray cloud*/
	 }
 .bg-gunmetal{
	 
	 background-color:#2A3439; /*gunmetal*/
	 
	 }
 .bg-marengo{

	 background-color:#4C5866; /*marengo*/
	 }
 .bg-graphite-gray{
	 
	 background-color:#4B4E53; /*graphite grey*/

	 }
 .bg-eyes-cube{
	 background-color:#E3E4E0; /*eyes cube*/
	 }
 .bg-coin{
	 background-color:#9897A9; /*coin*/
	 
	 }
	 
 .bg-fog{
	 background-color:#655967; /*Fog*/
	 
	 }
	 
/*.container{
	display:flex;
	width: 100%;
	min-height: auto;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	gap: 10px;
	
	}
.card-bg{
	width: 300px;
	height: 400px;
	border-radius: 5px;
	background-position: center;
	background-size: cover;
	position:relative;}
.content{
	position: absolute;
	left: 0;
	padding: 5px;}
.card-categories{
	font-size: 0.8rem;
	margin-bottom: 10px;
	text-transform:uppercase;
	}
.card-heading{
	font-size: 1.8rem;
	text-shadow: 2px 2px 2px rgba(204,204,204,1);

	}
.card:hover{
	transform: scale(1.1);
	cursor: pointer;
	transition: all 0.2 ease-in-out;}
	
.container:hover >.card:not(:hover) .card-bg{
	
	filter: brightness(0.5) opacity(50%);
	}
	*/
	
	
	
	/*HTML SAYFASI */
	
	<div class="container">

      <div class="card">
      <div class="card-bg" style="background-image:url('indexgaleri/logolu_paspas1.png')">
      <div class="content">
      <p class="card-categories">Oteller İçin</p>
      <h3 class="card-heading">Example Card Heading</h3>
      </div> </div> </div>
      
      <div class="card">
      <div class="card-bg" style="background-image:url('indexgaleri/logolu_paspas2.png')">
      <div class="content">
      <p class="card-categories">Restaurant & Kafeler</p>
      <h3 class="card-heading">Example Card Heading</h3>
      </div> </div> </div>
      
      <div class="card">
      <div class="card-bg" style="background-image:url('indexgaleri/logolu_paspas3.png')">
      <div class="content">
      <p class="card-categories">Eczaneler</p>
      <h3 class="card-heading">Example Card Heading</h3>
      </div> </div> </div>
      
      <div class="card">
      <div class="card-bg" style="background-image:url('indexgaleri/logolu_paspas4.png')">
      <div class="content">
      <p class="card-categories">Kurumsal Alanlar</p>
      <h3 class="card-heading">Example Card Heading</h3>
      </div> </div> </div>
      

      </div>