@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,700&display=swap');
:root{
  --background-color: #b0b0b0; 
  --background-color-2: #252525;
  --background-color-3: #ebebeb;
  --background-color-transparent:rgba(12,12,12,.5);
  --background-card:  #c4c4c4;
  --primary-color: #feae00;
  --secondary-color: #252525;
  --third-color: #4dc4ca;

  --white-color: #fffefe;
  --dark-color: #2c2c2c; 
}
body{scroll-behavior: smooth;padding: 0;margin: 0;font-family: 'PT Sans', sans-serif;}
footer p{margin:0;padding:0;font-size:1em;}
footer a{text-decoration: none;}

.container{width:90%;margin:0 auto;max-width: 1280px;}
main{padding:0 0 50px 0; }
header{width: calc(100% - 40px);padding:0 20px;}
header .container{position: relative;}
header .logoContainer{width: 20%;max-width: 105px;padding-top: 20px;margin: 0;}
header .logoContainer img{width: 100%;}
@media (max-width: 768px){
  header .logoContainer{margin: 0 auto;}
}





footer{padding: 100px 0 25px 0;background-color: var(--dark-color);}
footer #footer1{display: grid; grid-template-columns: 100px auto;grid-gap: 10px;}
footer #footer1 figure{margin: 0;}
footer #footer1 img{width: 100%;}
footer #footer1 h2{padding: 0;margin: 0;font-size: 2.2em;color: var(--background-color);font-weight: 300;}
footer #footer1 h3{padding: 0;margin: 0;font-size: 1.7em;color: var(--white-color);}
footer #footer2 a button{display: grid;align-items: center;padding: 10px 50px;background: transparent;border: 2px solid var(--primary-color);font-size: 1em;font-weight: 800;color:var(--background-color);border-radius: 10px;margin-top: 20px;font-family: 'PT Sans', sans-serif; }
footer #footer2 a button:hover{cursor: pointer;}

footer #footer3{margin: 25px auto;display: grid;grid-template-columns: 1fr 2fr;border-bottom: 1px solid var(--background-color);padding: 10px 0;align-items: center;justify-content: space-evenly;}
footer #footer3 div:first-child p{color: var(--white-color);font-weight: 800;}
footer #footer3 div:first-child a{color: var(--background-color);font-weight: 800;font-size: .9em;}
footer #footer3 div:first-child a span{color: var(--third-color);}
footer #footer3 div:nth-child(2){position:relative;text-align: right;}
footer #footer3 div:nth-child(2):after{content: '';position:absolute;background-color: var(--primary-color);bottom: -21px;right: 180px;width: 2px;height: 50px;}
footer #footer3 div:nth-child(2) p{color: var(--background-color);font-weight: 800;display: inline;}
footer #footer3 div:nth-child(2) a{color: var(--background-color);font-weight: 800;display: inline;padding: 0 0 0 35px;}
footer #footer3 .faqBtn:hover{cursor: pointer;}

footer #footer4{display: grid;grid-template-columns: auto auto 130px;}
footer #footer4 p{color: var(--background-color);font-size: .9em;}
footer #footer4 a{color: var(--background-color);font-size: .9em;}
footer #footer4 .socialMediaContainer{display:grid;position: unset;opacity: 1;border: 0; padding: 0;grid-template-columns: repeat(4, 25px);grid-gap: 10px;}
footer #footer4 .socialMediaContainer svg path{fill: var(--third-color);}

@media(max-width: 850px){
  footer #footer4{display: grid;grid-template-columns: auto auto;grid-gap: 10px;}
  footer #footer4 .socialMediaContainer{grid-column-start: 1;grid-column-end: 3;margin: 0 auto;width: 165px;}
}

@media(max-width: 768px){
  footer #footer4{display: grid;grid-template-columns: auto;text-align: center;}
  footer #footer4 .socialMediaContainer{grid-column-start: 1;grid-column-end: 2;grid-template-columns: repeat(4, 30px) !important;}
}
@media(max-width: 650px){
  footer #footer3{grid-template-columns: 1fr;text-align: center;grid-gap: 20px;}
  footer #footer3 div:nth-child(2){text-align: center;}
  footer #footer3 div:nth-child(2) p{display: block;}
  footer #footer3 div:nth-child(2) a{margin: 0;padding: 0;display: block;}
  footer #footer3 div:nth-child(2):after{opacity: 0;}

}
@media(max-width: 550px){
  footer{padding: 50px 0;}
  footer #footer1{grid-template-columns: auto;}
  footer #footer1 figure{margin: 0 auto;max-width: 120px;}
  footer #footer1 h3{font-size: 1.5em;text-align: center;}
  footer #footer1 h2{font-size: 2em;text-align: center;}
  footer #footer2 a button{margin: 20px auto 0 auto}
}

@media(max-width: 320px){
  footer #footer1 h3{font-size:1em ;}
  footer #footer1 h2{font-size: 1.5em;}
}