@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --font-text: "outfit", sans-serif;
  --font-heading: "Alata", serif;
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extra-bold: 800;
  --font-black: 900;
} 

body {background-color: #EFE2C6;}
body p { color: var(--color-black); font-family: var(--font-text); font-size: 24px; line-height: 36px; font-weight: var(--font-regular); text-transform: capitalize; margin-bottom: 0;}

#main-outer-wrap h1 {font-family: var(--font-heading); font-size: 72px; line-height: 84px; letter-spacing: 2px; font-weight: var(--font-regular); color: var(--color-black); text-transform: uppercase; margin-bottom: 0; text-align: center;}
#main-outer-wrap h2 {font-family: var(--font-heading); font-size: 60px; line-height: 70px; letter-spacing: 2px; font-weight: var(--font-regular); color: var(--color-black); text-transform: uppercase; margin-bottom: 0; text-align: left; padding-left: 100px;}
.container { max-width: 1430px; margin: 0 auto;}

#main-outer-wrap .top-wrap {text-align: center; padding-top: 46px;}
#main-outer-wrap .main-hero-sec p {text-align: center; padding-top: 19px; padding-left: 260px; padding-right: 260px;}
#main-outer-wrap .main-hero-sec {padding-top: 29px;}
#main-outer-wrap .address-box {background-color: #7d6a411a; padding: 25px 36px; display: flex; align-items: baseline; gap: 30px; margin-bottom: 19px;}
#main-outer-wrap .address-box img {position: relative; top: 6px;}
#main-outer-wrap .address-box p a { color: var(--color-black); font-family: var(--font-text); font-size: 24px; line-height: 36px; font-weight: var(--font-regular); text-transform: capitalize; margin-bottom: 0; text-decoration: none;}
#main-outer-wrap .address-box p a:hover {text-decoration: underline;}
#main-outer-wrap .second-sec {padding-top: 47px; padding-bottom: 93px;}
#main-outer-wrap .third-sec {background: url("../images/launch-bg.webp"); background-repeat: no-repeat; background-size: auto; padding-top: 20px; padding-bottom: 20px; margin-top: -120px; margin-bottom: 100px;}
#main-outer-wrap .second-wrap-outer img {max-width: 100%; position: relative; top: 90px;}


@media (min-width: 1025px) and (max-width: 1200px) {
#main-outer-wrap .third-sec {margin-top: 0;}
#main-outer-wrap .second-wrap-outer img {position: inherit;}
}
@media (min-width: 768px) and (max-width: 1024px) {
#main-outer-wrap h1 {font-size: 40px; line-height: 50px;}
#main-outer-wrap h2 {font-size: 35px; line-height: 45px; text-align: right; padding-right: 50px;}
#main-outer-wrap .third-sec {margin-top: 0; margin-bottom: 50px;}
#main-outer-wrap .main-hero-sec p {padding-right: 0; padding-left: 0;}
body p, #main-outer-wrap .address-box p a { font-size: 18px; line-height: 30px;}
#main-outer-wrap .address-box {padding: 20px 20px; gap: 15px;}
#main-outer-wrap .second-sec {padding-top: 40px; padding-bottom: 40px;}
#main-outer-wrap .top-wrap img {width: 250px;}
#main-outer-wrap .second-wrap-outer img {position: inherit;}
}
@media (max-width: 767px) {
#main-outer-wrap h1 {font-size: 30px; line-height: 40px;}
#main-outer-wrap h2 {font-size: 25px; line-height: 35px; text-align: right; padding-right: 0; padding-left: 0;}
#main-outer-wrap .third-sec {margin-top: 0; margin-bottom: 50px; background-position: 16%;}
#main-outer-wrap .main-hero-sec p {padding-right: 0; padding-left: 0;}
body p, #main-outer-wrap .address-box p a { font-size: 16px; line-height: 28px;}
#main-outer-wrap .address-box {padding: 15px 10px; gap: 15px;}
#main-outer-wrap .second-sec {padding-top: 40px; padding-bottom: 40px;}
#main-outer-wrap .top-wrap img {width: 200px;}
#main-outer-wrap .address-box p a {word-break: break-all;}
#main-outer-wrap .second-wrap-outer img {position: inherit;}
}