body{font-family: Playfair Display;
background: rgb(29, 23, 23);}

.container{max-width: 1400px;
margin: 0 auto;}



header{background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0.3)), url('./image/dvsn-1200w-1.jpg');
background-repeat: no-repeat;
background-size: cover;
color: white;
text-align: center;
padding: 180px;}

header h1{font-family: Playfair Display;
font-weight: 900;
font-style: Bold;
font-size: 128px;
line-height: 1;
margin: 30px 0;
}

header h2{font-weight: 600;
font-size: 40px;
line-height: 1.5;
margin: 0;}

header h3{font-weight: 900;
font-size: 24px;
line-height: 1.5;
letter-spacing: 5px;
margin: 0;}

header a{font-weight: 700;
font-size: 14px;
line-height: 1.5;
text-align: center;
letter-spacing: 3px;
text-transform: uppercase;
background-color: white;
color: black;
text-decoration: none;
padding: 16px 32px;
display: inline-block;
margin-top: 32px;}

main{background: black;
padding: 75px;}

main h2{font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 5px;
color: white;
opacity: 0.3;
text-transform: uppercase;
margin: 0;}

main h3{font-weight: 700;
font-size: 40px;
line-height:1.5 ;
color: white;
margin: 0;}

main h4{color: white;
font-weight: 700;
font-size: 24px;
line-height: 1.5;
margin: 0;}

main h5{color: white;
font-weight: 700;
font-size: 13px;
line-height: 1.5;
margin: 0;}

main p{font-weight: 400;
font-size: 16px;
line-height: 1.5;
font-style: normal;
color: white;
opacity: 0.7;}

.img-responsive{max-width: 100%;
max-height: 100%;
margin-top: 20%;}

section{max-width: 100%;
margin: 0;
padding: 100px;
}


section.secondary-section{background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0.3)),url('./image/one.JPG');
background-repeat: no-repeat;
background-size: cover;
}

.text-center{text-align: center;}

.grid{display: grid;
grid-gap: 64px;}

.grid-2-columns{grid-template-columns: 1fr 1fr;}

.grid-3-columns{grid-template-columns: 1fr 2fr 2fr;}

.grid-3-equal-columns{grid-template-columns: 1fr 1fr 1fr;}

.card{background-color: black;
opacity: 0.8;
margin: 30px 0;
padding: 20px;}

.card.body{padding: 30px;}

.btn{display: block;
color: white;
font-weight: 700;
font-size: 14px;
line-height: 1.5;
text-align: center;
letter-spacing: 3px;
text-transform: uppercase;
padding: 16px;
background-color: rgb(236, 94, 94);}

.embed{width: 100%;
aspect-ratio: 1/1;}

.card.card-footer{padding: 30px;}

.third-section{background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0.3)),url('./image/two.JPG');
background-repeat: no-repeat;
background-size: cover;
margin: 30px 0;
}

.grid-3-even-columns{grid-template-columns: 1fr 1fr 1fr;
grid-gap:5px;
padding: 15px;}

footer{color: white;
background-image:linear-gradient(rgba(37, 15, 15, 0.7),rgba(0,0,0.5)),  url('./image/40583-nsh-dvsn-006-05-1-1659484757.jpeg');
background-repeat: no-repeat;
background-size: cover;
padding: 20px 0;
max-height: fit-content;
}
footer h3{font-weight: 700;
font-size: 20px;
line-height: 30px;
padding: 0;
text-align: center;}

footer p{font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
opacity: 0.9;}

footer ul{
padding: 0;
text-align: center;}


footer li{list-style: none;
margin: 0;
padding: 0;}

footer a{color: white;
opacity: 0.7;
text-decoration: none;}



@media (max-width:900px) {header{padding: 60px 0;}
header h1{font-size: 48px;}
header h2{font-size: 20px;}
header h3{font-size: 12px;}
main h4{font-size: 20px;}
header h5{font-size: 6.5;}
main{padding: 0;}
.grid{grid-template-columns: 1fr;
grid-gap:32px;}
section{padding: 30px;}
.embed{aspect-ratio: 30/15}
  
}