body{ overflow-x: hidden;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  background-color: rgba(0,0,0,0.9);
color:white;}
.grid{
    display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;}

header{background-image: 
    linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.7)),
     url("../images/obsession.jpeg");
background-repeat: no-repeat;
background-size: cover;
background-position: top;
padding: 60px;
letter-spacing: 2;
}

h3{ color: white;
font-weight: 400;}

h1{ color:white;
font-weight: 600;
line-height: 1.5;}

main{
    text-align: center;
}

.click-here-button a{ color:black;
    background-color: white;
    text-decoration: none;
    padding: 7px;
    display: inline-block;
    border-radius: 3px;
    margin: 20px;}

footer{ text-align: center;}

@media(max-width:900px){
  body{ overflow-x: hidden;}

.click-here-button a{ 
    font-size: 15px;}
h1{ text-align: center;
font-size: 20px;
line-height: 2;
margin: 40px auto;
padding-top: 30px;
transition: all 0.4s ease-in-out;
}
header h3{ position: absolute;
top: 0;
left: 0;
padding:40px 50px 0px 60px;
font-size: 12px;} 

.grid{ 
    display: grid;
    grid-template-columns: 1fr;
gap: 10px;
}

footer { 
    font-size: 13px;
line-height: 7px;
height: 100px;}


.card-grid{ grid-template-columns: 1fr !important;
    gap: 30px;
    }
.card-image{ max-width: 100%;
filter: brightness(90%) ;}
.card{
    padding:20px;
    margin:10px;
}
.card-btn{
    margin-top: 30px !important;
}
.card-description{ height: 100px !important;}
table{ font-size: 16px;}
th, tbody{padding: 3px !important;
    margin: 10px;
}
table{ height: 70px;
margin:10px auto
}
.table{ padding: 0;}
.long-tittle{width: 90px !important;}}








footer{ background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.5)), url("../images/footer-img.jpeg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding:30px;

}

footer a{
color:black;
    background-color: white;
    text-decoration: none;
    display: inline-block;
    border-radius: 3px;
margin: 5px;
padding: 4px;}


.footer a:hover{text-decoration: underline !important;
color: white !important; 
background-color: black !important; }



.footer-links-one a{ color: black;
background-color: white;
text-decoration: underline;
}

.footer-links-two a{ 
    color: black;
    background-color: white;
text-decoration: underline;
}
ul{
    list-style: none;
}



main h3{ opacity: 0.6;}

section{
    background-color: whitesmoke;
    color: black;
    margin: 0px auto;
    padding: 35px;
}
section h2,
section h3,
section p{
color: black;
letter-spacing: 2;
line-height: 1.5;
padding: 10px;
margin:10px;
}

section.secondary-section{
    max-width:100%;
    background-color: white;
  
}
section.secondary-section h3{margin: 5px;

}
section.secondary-section h2{
    padding: 5px;
}


.container{
    max-width: 1400px;
    margin: 10px auto;
    padding: 20px;}

    .card-grid
    {
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  justify-items: center;
    }

    h4{ font-size: 16px;
    font-weight: 100;}

  .card h3{ opacity: 1 !important;
color: black;}

.card{
    max-width: 300px;
   

}
.card-btn{

    display:block;
    background-color: black;

    color:white;
padding: 10px;





}
.card-image{ width: 250px;
height:260px;}


.card-description{ padding: 5 px;
    height:150px;

}



    .video {width: 100%;
        filter: blur(4px);
transition: filter 0.3s ease-out;}

.video:hover { filter: blur(0);}
       

table{ margin: 0 auto;
    gap: 10px;
    height: 80px
;
    
}
th, tbody{text-align: center ;
    padding: 10px;
}
.long-tittle{display: block;
    width: 150px;
padding-top: 32px;}