@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wgth@400;700&display=swap");

* {
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: "Titillium Web",sans-serif;
}
.container{
width: 100%;
height:100vh ;
padding-left:8% ;
padding-right:8% ;
background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)) ,url(./indir\ \(2\).jpeg);
background-position:center;
background-size:cover ;



}
p{
font-size: 11px;
color:#fff;
line-height: 16px;

}
.btn{
padding:12 px 28 px ;
font-size:12px ;
font-weight:700 ;
margin-top:30px;
cursor: pointer;
color:black;
background-color:#fff ;
border-radius: 20px;
text-decoration: none;
border: 1px solid red;transition: ease 0.5s;
}
.btn:hover{
background-color: black;
color: #fff;
border-color:#fff ;

}
.navbar{
    height: 12%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav ul{
list-style: none ;
display: flex;
column-gap: 20px;

}
 nav ul li a{
color:#fff;
text-decoration: none;
transition:ease 0,5s ;
}
nav ul li a:hover{
    color:black;
}
.row{
    display: flex;
    align-items:center ;
    column-gap: 10px;
    height: 88%;
}
.col{
flex-basis:50% ;


}
h1{
color:#fff;
font-size: 100px;
}
.desc{
    font-size:16px ;
}
.cards{
    max-width: 500px;
    margin:auto;
}
.card{
    width:200px;
    height:230px ;
    display:inline-block ;
     
     background-position: center;
     background-size: cover;
     border-radius:10px ;
     padding:15px 25px;
     cursor: pointer;
     border:1px solid red;
     position:relative;
     transition:ease 0.5s ;
     margin:10px
}
.card:hover{
  transform:translateY(-10px);
  border-color:#fff ;

}
.card .card-head{
    background-color: rgba(0,0,0,0.7);
    color:#fff;
    border-radius: 6px;
    padding:6px;
}
.card .card-bottom{
position: absolute;
bottom:26px ;

}
.card.card-1{
    background-image: url(./images.jpeg);
}
.card.card-2{
    background-image: url(./images\ \(1\).jpeg);
}
.card.card-3{
    background-image:url(./indir\ \(1\).jpeg) ;
}
.card.card-4{
    background-image:url(./indir.jpeg) ;
}