@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*{font-family: 'Poppins', sans-serif;}
img{ max-width: 100%;}

body{ margin: 0; padding:40px 0; background: url("../images/main_bg.jpg"); background-size: cover; position: relative;}
.page-border{ height: 30px; background: url("../images/border-bg.jpg"); background-size: contain; position:absolute; left:0; width: 100%;}
.top{ top: 0;}
.bottom{ bottom: 0;}

.p-0{ padding: 0 !important;}

.conatiner{ max-width: 810px; margin: auto; padding: 0 20px;}
.conatiner-1080{ max-width:1120px; margin: auto; padding: 0 20px;}
.logo_wrap{ text-align: center; padding: 60px;}

h1.title{ color: #6d2000; text-align: center; font-size: 40px; font-weight: 500; margin: 0 0 50px; padding: 0; text-transform: uppercase;}
h1.title strong{ font-weight: 800;}
h1.title span{ display: block;}

.menu-wrap{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 50px;}
.menu-wrap a{ display: block; background: #8a7407; color: #fff; padding:15px 55px; border-radius: 12px; font-size: 32px; font-weight: 700; text-transform: uppercase; margin: 15px; text-decoration: none; text-shadow: 0 5px 6px rgba(0,0,0,0.1); box-shadow: 0 8px 0 0px #514304;}
.menu-wrap a:hover{ background:#514304 ; box-shadow: 0 0 0 0px #514304;}

.main-img{ text-align: center; margin-bottom: 50px;}

.bottom-links{ text-align: center; padding-bottom: 50px; font-size: 32px; font-weight: 500; color: #6d2000; letter-spacing: 3px;}
.bottom-links a{ color: #6d2000;  text-transform: uppercase; display: inline-block; text-decoration: none; padding: 0 20px;}
.bottom-links a:hover{ color: #000;}

.bg-top{ background: url(../images/bng-top.jpg) no-repeat top right;}
.bg-bottom{ padding-bottom: 100px; background: url(../images/bg-bottom.jpg) no-repeat left bottom;}
.logo-location{ padding: 125px 102px;}

h1.title-location{ color: #6d2000; text-align: center; font-size:60px; line-height: 65px; font-weight:600; margin: 0 0 80px; padding: 0; text-transform: uppercase;}
h1.title-location strong{ font-weight: 800;}
h1.title-location span{ display: block;}

.red-text{color: #cc2127; text-align: center; font-size:40px; line-height: normal; font-weight:500; letter-spacing: 3px; margin: 0 0 40px; padding: 0; text-transform: uppercase;}

.locations{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px 42px; text-align: center; max-width: 920px; margin: auto; padding: 0 20px 185px;}
.locations h2{ margin: 0; padding: 0 ; font-size: 38px; line-height: 42px; font-weight: 800; text-transform: uppercase;}
.locations a{ color: #8a7407; text-decoration: none;}
.locations a:hover{ color:#6d2000}


@media screen and (max-width:1024px){
    .logo_wrap {padding: 30px;}
    .logo_wrap img{max-width: 250px;}
    h1.title {font-size: 30px;margin: 0 0 30px;}
    .menu-wrap a {padding: 12px 45px;border-radius: 10px;font-size: 26px;margin: 12px;}

    .main-img {margin-bottom: 30px;}
    .bottom-links {padding-bottom: 30px;font-size: 26px;letter-spacing: normal;}
    .bottom-links a{ padding: 0 10px;}

    .bg-top{ background-size: 400px;}
    .bg-bottom{ background-size: 300px;}
    .logo-location {padding: 75px;}
    h1.title-location {font-size: 50px;line-height: 55px; margin: 0 0 60px;}
    .red-text {font-size: 36px; margin: 0 0 25px; letter-spacing: 0;}
    .locations h2 {font-size: 32px;}
    
}

@media screen and (max-width:768px){
    .logo_wrap {padding: 20px 0;}
    .logo_wrap img{max-width: 200px;}
    h1.title {font-size:24px;margin: 0 0 20px;}
    .menu-wrap a {padding: 12px 45px;border-radius: 10px;font-size: 20px;margin: 10px;}

    .main-img {margin-bottom: 20px;}
    .bottom-links {padding-bottom: 20px;font-size: 24px;}
    .bottom-links a{ padding: 0 10px;}


    .bg-top {background-size: 42vw;}
    .bg-bottom {background-size: 32vw;}
    .logo-location {padding: 25px; max-width: 260px;}
    h1.title-location {font-size: 36px;line-height: 42px; margin: 20px 0 40px;}
    .red-text {font-size: 26px; margin: 0 0 20px;}
    .locations {gap: 30px 25px; padding: 0 20px 65px;}
    .locations h2 {font-size: 26px; line-height: 30px; }
}

@media screen and (max-width:560px){
    .logo_wrap {padding:10px 0;}
    .logo_wrap img{max-width: 160px;}
    h1.title {font-size:20px;margin: 0 0 15px;}
    .menu-wrap a {padding:10px 35px;border-radius: 8px;font-size: 18px;}

    .main-img {margin-bottom: 15px;}
    .bottom-links {padding-bottom:25px;font-size: 16px;}
    .bottom-links a{ padding: 0 5px;}

    .logo-location {padding: 25px 10px;; max-width: 200px;}
    .locations {grid-template-columns: repeat(1, 1fr);}
    h1.title-location {font-size: 24px;line-height: 30px; margin: 10px 0 25px;}
    .red-text {font-size: 20px;}
}