:root{
   --primary: whitesmoke;
   --secondary: #45505a;
   --accent: #e08747;
   --off-white:rgb(243, 243, 243);
   --basic-padding:15px;
   --basic-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   
}
@font-face {
   font-family: "Talleyrand";
   src: url(./assets/fonts/talleyrand.woff) format("woff"),
      url(./assets/fonts/talleyrand.woff2) format("woff2"),
   url(./assets/fonts/talleyrand.ttf) format("truetype");
}
@font-face {
   font-family: "Metamorphous";
   src: url(./assets/fonts/Metamorphous-Regular.ttf) format("truetype");
}
/* CSS Reset Start */
html {
   box-sizing: border-box;
   font-size: 16px;
}

*,
*:before,
*:after {
   box-sizing: inherit;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
   margin: 0;
   padding: 0;
   font-weight: normal;
}

ol,
ul {
   list-style: none;
}

img {
   max-width: 100%;
   height: auto;
}

/* CSS Reset End */
html {
   font-size: 14px;
}

@media (min-width: 640px){
   html{
      font-size: 16px;
   }
}
body{
   display:flex;
   flex-direction: column;
   align-items:center;
   font-family: "Metamorphous";
  
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: "Talleyrand", serif;
}

p {
   line-height: 1.5rem;
}

a{
   color:inherit;
   text-decoration:none;
}
a:hover{
   text-decoration:underline;
}
main {
   padding: 50px 0;
}
@media (min-width:640px) {
   header,
   main,
   footer {
      padding: 50px;
      width:100%;
   }
}

header {
   width: 100%;

   background:
      radial-gradient(circle, transparent 20%, var(--secondary) 20%,
      var(--secondary) 80%, transparent 80%, transparent),
      radial-gradient(circle, transparent 20%, var(--secondary) 20%,
      var(--secondary) 80%, transparent 80%, transparent) 50px 50px,
      linear-gradient(var(--off-white)8px, transparent 8px) 0 -4px,
      linear-gradient(90deg, var(--off-white) 8px, transparent 8px) -4px 0;
      background-color: var(--secondary);
      background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;
}
.header-wrapper {
   margin: 0 auto;
   max-width:1000px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 30px;
   
}

.img-wrapper {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   align-items: center;
   position: relative;
}

.img-wrapper > img{
   max-height: 100%;
   width: 100%;
   object-fit:cover;
}

.img-wrapper > .img-text{
   position:absolute;
   bottom:10px;;
   padding:6px;
   font-family:"Talleyrand", serif;
   font-size: 2.25rem;
   background-color: rgba(0, 0, 0, 0.377);
   color:var(--off-white);
}
header .img-wrapper{
   width: 300px;
   flex-shrink:0;
}

header .img-wrapper img {
   object-fit: cover;
}
@media (min-width: 640px) {
   .header-wrapper {
      display: block;
   }

   header .img-wrapper {
      width: 250px;
      margin-right: 15px;
      float: left;
      box-shadow: var(--basic-shadow);
      transform-origin: right bottom;
      transform: scale(110%)
   }
}

@media (min-width: 1024px) {
   .header-wrapper {
      display: flex;
      flex-direction: row;
      gap: 30px;
   }

   header .img-wrapper{
      width: 350px;
      margin: 0 0;
      float: none;
      box-shadow: var(--basic-shadow);
      transform-origin: left;
      transform: scale(110%)
   }
}


.header-body {
   padding: var(--basic-padding);
   box-shadow: var(--basic-shadow);
   background-color: var(--off-white);
}

.header-body > * {
   margin-bottom:20px;
}

.header-body > h1{
   font-size: 3rem;
}

.header-body ul {
   display:flex;
   flex-direction:column;
   align-items:center;
   gap:10px;
}
.header-body li{
   padding: 5px 10px;   
   background-color: var(--secondary);
   box-shadow:var(--basic-shadow)
}

.header-body li:hover {
   background-color: var(--accent);
   transform:scale(1.1);
   transition:all .3s ease;
}

.header-body li a{
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--off-white);
   text-decoration: none;
}


.icon-text {
   display: flex;
   align-items: center;
   gap:5px;
}

.icon-text .mdi {
   font-size: 2rem;
}

main{
   position:relative;
   display: flex;
   flex-direction: column;
   align-items: center;
}
main::before {
   content:"";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0.6;
   background: url("./assets/img/bg.jpg");
   background-size: cover;
   background-position: center 10%;
   background-repeat: no-repeat;
   z-index: -1;
}

.card-grid {
   max-width: 1200px;
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   gap: 30px;
   padding: var(--basic-padding);
}

@media (min-width: 640px) {
   .card-grid {
         grid-template-columns: repeat(2, 1fr)
   }

}
@media (min-width: 1024px) {
   .card-grid {
      grid-template-columns: Fepeat(3, 1fr);
     
   }
}

section > h1{
   font-size: 3rem;
   text-align: center;
}
.card {
   overflow:hidden;
   display: flex;
   flex-direction: column;
   box-shadow: var(--basic-shadow);
   
}

.card > .img-wrapper {
   background-color: rgba(255, 255, 255, 0.507);
}

.card-content{
   display:flex;
   flex-direction:column;
   flex-grow:1;
   padding:15px;
   background-color: var(--secondary);
   color:white;
}

.card-header {
display: flex;
     justify-content: space-between;
      margin-bottom: 10px;
}

.card-header > h2{
   font-size: 2rem;
}
.card-header > a{
   width:40px;
   height:40px;
   display:flex;
   justify-content:center;
   align-items:center;
   color: var(--off-white);
   font-size:2rem;
   text-decoration:none;
   border-radius:50%;
}
.card-header > a:hover{
   
   background-color: var(--accent);
   transition:all .3s ease;

}




footer {
   display: flex;
   justify-content:center;
   align-items:center;
   width:100%;

   background:
         radial-gradient(circle, transparent 20%, var(--secondary) 20%,
            var(--secondary) 80%, transparent 80%, transparent),
         radial-gradient(circle, transparent 20%, var(--secondary) 20%,
            var(--secondary) 80%, transparent 80%, transparent) 50px 50px,
         linear-gradient(var(--off-white)8px, transparent 8px) 0 -4px,
         linear-gradient(90deg, var(--off-white) 8px, transparent 8px) -4px 0;
      background-color: var(--secondary);
      background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;
}
.footer-container{
   padding:20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   background-color:var(--off-white);
   box-shadow:var(--basic-shadow);
}

footer section{
   display:flex;
   flex-direction:column;
   gap:15px;
   max-width:600px;
   padding:15px;

}


footer img {
   max-width: 300px;
}

@media (min-width:640px) {
   .footer-container{
      display:flex;
      flex-direction:row;
      align-items: center;
      justify-content:center;
      gap:50px;
      max-width: 1000px;
     
   }
   footer img {
      max-width: 350px;
   }
}

.info-item{
   margin-bottom:10px;
   display:flex;
   flex-direction: column;
   gap: 5px;
}

@media (min-width:1024px) {
   .info-item {
         display: flex;
            flex-direction: row;
   }
}