/*general styles*/
.index-container,
.tours-container { 
    width: 960px;
    margin: 0 auto;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

body {
    background-color: #FFF;
    color: #111827;
    font-family: Open Sans, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; 
}

/*header styles*/
h1 {
    font-family: Domine;
    font-size: 31px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    margin-top: 20px;
}

.logo a {
    display: inline-block;
}

.logo a:hover {
    text-decoration: none;
}

header p {
    color: #8B4448;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 20px;
    margin-left: 219px;
    margin-right: 96px;
}

header li {
    font-size: 18px;
    line-height: normal;
    margin-top: 39px;
    margin-bottom: 37px;
}

header li + li {
    margin-left: 32px;
}

header a {
    color: #000;
    text-decoration: none;
}

header a:hover {
    color: #111827;
    text-decoration: underline;
}

/*welcome banner styles*/
.welcome-banner {
    background-image: url('../img/lake.png');
    height: 450px;
    overflow: hidden; /*stop margin from collapsing*/
}

.welcome-text {
    width: 430px;
    height: 330px;
    background-color: #3D3C2AB2;
    margin-top: 60px;
    margin-bottom: 60px;
}

.welcome-text h2 {
    color: #AAD5D3;
    font-family: Domine;
    font-size: 60px;
    font-weight: 700;
    line-height: 90px;
    text-transform: uppercase;
    margin-top: 10px;
    margin-left: 35px;
    margin-right: 35px;
    width: 360px;
    height: 180px;
}

.welcome-text p {
    color: #FFF;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 5px;
    margin-left: 35px;
    margin-right: 52px;
    width: 343px;
    height: 62px;
}

.welcome-text a {
    color: #111827;
    background-color: #AAD5D3;
    text-align: center;
    font-size: 18px;
    line-height: 45px; 
    text-decoration: none;
    margin-left: 35px;
    margin-right: 189px;
    display: inline-block; /*make the link a block element to add width and height*/
    width: 206px;
    height: 45px;
}

.welcome-text a:hover {
    background-color: #111827;
    color: #FFFFFF;
}

/*latest blog post styles*/
h3 {
    font-family: Domine;
    font-size: 48px;
    font-weight: 700;
    line-height: 72px; 
    text-transform: uppercase;
    margin-top: 49px;
    margin-bottom: 24px;
    margin-right: 450px;
}

/*california styles*/
.california, 
.scotland,
.australia {
    border-radius: 4px;
    border: 1px solid #9CA3AF;
    margin-bottom: 60px;
    height: 271px;
}

.california ul {
    border-radius: 0px 0px 4px 4px;
    background: #F3F4F6;
    width: 958px;
    height: 46px;
    margin-bottom: 1px;
}

h4 {
    color: #8B4448;
    font-family: Domine;
    font-size: 21px;
    font-weight: 700;
    line-height: 31.5px; 
    margin-top: 17px;
    margin-bottom: 11.5px;
    margin-left: 17px;
    margin-right: 107px;
    width: 467px;
    height: 31.5px;
}

.california p {
    margin-bottom: 42px;
    margin-left: 17px;
    margin-right: 36px;
    width: 538px;
    height: 120px;
}

.california div.flex-container img {
    margin-top: 17px;
    margin-bottom: 17px;
    margin-right: 17px;
    width: 350px;
    height: 188px;
}

.california li {
    font-style: italic;
    margin-top: 12px;
    margin-bottom: 10px;
    margin-left: 595px;
    margin-right: 34px;
    width: 55px;
    height: 24px;
}

.california li + li {
    margin-top: 12px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 34px;
    width: 121px;
}

.california li + li + li {
    margin-top: 12px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 4.85px;
    width: 49px;
}

.california li + li + li + li {
    margin-top: 14px;
    margin-bottom: 13.83px;
    margin-left: 0px;
    margin-right: 10.69px; 
    width: 18.311px;
    height: 18.172px;
    stroke-width: 1.5px;
    stroke: #111827;
}

.california li + li + li + li + li {
    margin-top: 14px;
    margin-bottom: 13.83px;
    margin-left: 0px;
    margin-right: 17.84px; 
}

/*scotland styles*/
.scotland ul {
    border-radius: 0px 0px 4px 4px;
    background: #F3F4F6;
    width: 958px;
    height: 46px;
    margin-bottom: 0px;
}

.scotland h4 {
    margin-top: 17px;
    margin-bottom: 12px;
    margin-left: 36px;
    margin-right: 259px;
    width: 295px;
    height: 32px;
}

.scotland p {
    color: #000;
    margin-bottom: 18px;
    margin-left: 36px;
    margin-right: 26px;
    width: 528px;
    height: 144px;
}

.scotland div.flex-container img {
    margin-top: 17px;
    margin-bottom: 18px;
    margin-left: 18px;
    width: 350px;
    height: 188px;
}

.scotland li {
    font-style: italic;
    margin-top: 11px;
    margin-bottom: 11px;
    margin-left: 566px;
    margin-right: 34px;
    width: 55px;
    height: 24px;
}

.scotland li + li {
    margin-top: 11px;
    margin-bottom: 11px;
    margin-left: 0px;
    margin-right: 34px;
    width: 121px;
}

.scotland li + li + li {
    margin-top: 11px;
    margin-bottom: 11px;
    margin-left: 0px;
    margin-right: 4.85px;
    width: 49px;
}

.scotland li + li + li + li {
    margin-top: 14px;
    margin-bottom: 13.83px;
    margin-left: 0px;
    margin-right: 10.84px; 
    width: 18.311px;
    height: 18.172px;
    stroke-width: 1.5px;
    stroke: #111827;
}

.scotland li + li + li + li + li {
    margin-top: 14px;
    margin-bottom: 13.83px;
    margin-left: 0px;
    margin-right: 10.69px;
}

.scotland li + li + li + li + li + li {
    margin-top: 14px;
    margin-bottom: 13.83px;
    margin-left: 0px;
    margin-right: 17.69px; 
}

/*australia styles*/
.australia ul {
    border-radius: 0px 0px 4px 4px;
    background: #F3F4F6;
    width: 958px;
    height: 46px;
    margin-bottom: 0px;
}

.australia h4 {
    margin-top: 17px;
    margin-bottom: 12px;
    margin-left: 17px;
    margin-right: 67px;
    width: 507px;
    height: 32px;
}

.australia p {
    color: #000;
    margin-bottom: 42px;
    margin-left: 18px;
    margin-right: 35px;
    width: 538px;
    height: 120px;
}

.australia div.flex-container img {
    margin-top: 17px;
    margin-bottom: 18px;
    margin-right: 17px;
    width: 350px;
    height: 188px;
}

.australia li {
    font-style: italic;
    margin-top: 11px;
    margin-bottom: 11px;
    margin-left: 546px;
    margin-right: 34px;
    width: 55px;
    height: 24px;
}

.australia li + li {
    margin-top: 11px;
    margin-bottom: 11px;
    margin-left: 0px;
    margin-right: 34px;
    width: 141px;
}

.australia li + li + li {
    margin-top: 11px;
    margin-bottom: 11px;
    margin-left: 0px;
    margin-right: 4.85px;
    width: 49px;
}

.australia li + li + li + li {
    margin-top: 14px;
    margin-bottom: 13.83px;
    margin-left: 0px;
    margin-right: 10.84px; 
    width: 18.311px;
    height: 18.172px;
    stroke-width: 1.5px;
    stroke: #111827;
}

.australia li + li + li + li + li {
    margin-top: 14px;
    margin-bottom: 13.83px;
    margin-left: 0px;
    margin-right: 10.69px;
}

.australia li + li + li + li + li + li {
    margin-top: 14px;
    margin-bottom: 13.83px;
    margin-left: 0px;
    margin-right: 17.69px; 
}

/*footer styles*/
.footer {
    background-color: #8B4448;
    height: 300px;
    overflow: hidden;
}

.footer h2 {
    color: #FFF;
    font-family: Domine;
    font-size: 31px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    margin-top: 48px;
    margin-bottom: 17px;
    margin-left: 298px;
    margin-right: 306px;
}

.top-row, 
.bottom-row {
    display: flex;
    flex-wrap: wrap;
}

.top-row li,
.bottom-row li{
    font-weight: 700;
    line-height: normal;
}

.top-row li {
    margin-top: 0px;
    margin-bottom: 16px;
    margin-left: 298px;
    margin-right: 68px;
}

.top-row li + li {
    margin-top: 0px;
    margin-bottom: 16px;
    margin-left: 0px;
    margin-right: 68px;
}

.top-row li + li + li {
    margin-top: 0px;
    margin-bottom: 16px;
    margin-left: 0px;
    margin-right: 306px;
}

.bottom-row li {
    margin-top: 0px;
    margin-bottom: 24px;
    margin-left: 392px;
    margin-right: 68px;
}

.bottom-row li + li {
    margin-top: 0px;
    margin-bottom: 24px;
    margin-left: 0px;
    margin-right: 392px;
}

.footer a {
    color: #FFF;
    text-decoration: none;
}

.top-row a:hover,
.bottom-row a:hover {
    color: #AAD5D3;
}

.horizontal-line {
    background-color: #FFF;
    margin-bottom: 24px;
    margin-left: 50px;
    margin-right: 50px;
    width: 860px;
    height: 1px;
}

.footer p {
    color: #FFF;
    text-align: center;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 48px;
    margin-left: 302px;
    margin-right: 302px;
    width: 356px;
}

/*tours banner styles*/
.tours-banner {
    background-image: url('../img/leaf.png');
    height: 300px;
    overflow: hidden; 
}

.tours-banner h2 {
    color: #AAD5D3;
    font-family: Domine;
    font-size: 60px;
    font-weight: 700;
    line-height: 90px; 
    text-transform: uppercase;
    margin-top: 78px;
    margin-left: 35px;
    margin-right: 711px;
}

.tours-banner p {
    color: #FFF;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 78px;
    margin-left: 35px;
    margin-right: 582px;
    height: 54px;
}

/*offer styles*/
.offer h3 {
    font-family: Domine;
    font-size: 48px;
    font-weight: 700;
    line-height: 72px; 
    text-transform: uppercase;
    margin-top: 49px;
    margin-bottom: 0px;
    margin-left: 1px;
    margin-right: 533px;
}

.group img,
.unique img,
.personal img {
    margin-top: 0px;
    margin-bottom: 12px;
    margin-left: 111px;
    margin-right: 111px;
    width: 76.78px;
    height: 85.025px;
    flex-shrink: 0;
}

.unique img {
    margin-left: 133px;
    margin-right: 133px;
    width: 33.971px;
}

.personal img {
    margin-left: 120px;
    margin-right: 120px;
    width: 59.599px;
}

.group h4,
.unique h4,
.personal h4 {
    color: #8B4448;
    text-align: center;
    font-family: Domine;
    font-size: 21px;
    font-weight: 700;
    line-height: 31.5px; 
    margin-top: 0px;
    margin-bottom: 12px;
    margin-left: 0px;
    margin-right: 0px;
    width: 300px;
}

.group p,
.unique p,
.personal p {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    width: 300px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
}

.group {
    margin-top: 24px;
    margin-bottom: 48px;
    margin-left: 0px;
    margin-right: 30px;
}

.unique {
    margin-top: 24px;
    margin-bottom: 48px;
    margin-left: 0px;
    margin-right: 30px;
}

.personal {
    margin-top: 24px;
    margin-bottom: 48px;
    margin-left: 0px;
    margin-right: 0px;
}

/*tours styles*/
.tours h3 {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 1px;
    margin-right: 526px;
}

.tours img {
    width: 429px;
    height: 250px;
    flex-shrink: 0;
    margin-top: 18px;
    margin-bottom: 24px;
    margin-left: 18px;
    margin-right: 18px;
}

.tours h4 {
    color: #8B4448;
    font-family: Domine;
    font-size: 21px;
    font-weight: 700;
    line-height: 31.5px; 
    margin-top: 0px;
    margin-bottom: 12px;
    margin-left: 18px;
    margin-right: 18px;
    width: 429px;
}

.tours p {
    display: flex;
    width: 429px;
    height: 80px;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0px;
    margin-bottom: 12px;
    margin-left: 18px;
    margin-right: 18px;
}

.asia p + p,
.highlands p + p,
.greenland p + p,
.vietnam p + p {
    font-style: italic;
    margin-top: 0px;
    margin-bottom: 12px;
    margin-left: 18px;
    margin-right: 0px;
    height: 24px;
}

.tours a {
color: #111827;
text-align: center;
font-weight: 700;
text-decoration: none;
margin-top: 0px;
margin-bottom: 35px;
margin-left: 15px;
margin-right: 0px;
}

.tours a:hover {
    text-decoration: underline;
}

.asia,
.highlands,
.greenland,
.vietnam {
    margin-top: 24px;
    margin-bottom: 30px;
    margin-left: 0px;
    margin-right: 30px;
    background-color: #F3F4F6;
    width: 465px;
    height: 523px;
    flex-shrink: 0;
}

.highlands {
    margin-top: 24px;
    margin-bottom: 30px;
    margin-left: 0px;
    margin-right: 0px;
}

.greenland {
    margin-top: 0px;
    margin-bottom: 56px;
    margin-left: 0px;
    margin-right: 30px;
}

.vietnam {
    margin-top: 0px;
    margin-bottom: 56px;
    margin-left: 0px;
    margin-right: 0px;
}

/*checkout banner styles*/
.checkout-banner {
    background-image: url('../img/sunrise.png');
    height: 300px;
    overflow: hidden; 
    margin-bottom: 49px;
}

.checkout-banner h2 {
    color: #AAD5D3;
    font-family: Domine;
    font-size: 60px;
    font-weight: 700;
    line-height: 90px; 
    text-transform: uppercase;
    margin-top: 123px;
    margin-left: 36px;
    margin-right: 573px;
}

.checkout-banner p {
    color: #FFF;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 60px;
    margin-left: 36px;
    margin-right: 581px;
    width: 343px;
    height: 27px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
}

/*order styles*/
.order h3 {
    font-family: Domine;
    font-size: 48px;
    font-weight: 700;
    line-height: 72px; 
    text-transform: uppercase;
    margin-top: 0px;
    margin-bottom: 24px;
    margin-left: 0px;
    margin-right: 0px;
    width: 300px;
}

.order img {
    margin-top: 0px;
    margin-bottom: 12px;
    margin-left: 0px;
    margin-right: 72px;
    width: 228px;
    height: 228px;
    flex-shrink: 0;
}

.order h4 {
    color: #8B4448;
    font-family: Domine;
    font-size: 21px;
    font-weight: 700;
    line-height: 31.5px; 
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    width: 300px;
}

.order p {
    margin-top: 0px;
    margin-bottom: 12px;
    margin-left: 0px;
    margin-right: 109px;
}

.order table {
    border: 1px solid #111827;
    border-collapse: collapse;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 51px;
    width: 249px;
    height: 89px;
    flex-shrink: 0;
}

.order th,
.order td {
    border: 1px solid #111827;
    color: #111827;
    font-family: Open Sans;
    font-size: 16px;
    font-style: normal;
    text-align: center;
    font-weight: 400;
    line-height: 24px; 
}

.order {
    margin-top: 0px;
    margin-bottom: 345px;
    margin-left: 0px;
    margin-right: 30px;
}

/*payment styles*/
.checkout-container {
    width: 962px; /*the figma file specifies 962px*/
    margin: 0 auto;
}

.payment .name,
.payment .address,
.payment .city,
.payment .email,
.payment .phone,
.payment .card,
.payment .expiry,
.payment .code {
    display: flex;
    flex-direction: column;
}

.payment fieldset {
    border: none;
    padding: 0px;
}

.payment input {
    padding: 0px;
}

.payment h3 {
    font-family: Domine;
    font-size: 48px;
    font-weight: 700;
    line-height: 72px; 
    text-transform: uppercase;
    margin-top: 0px;
    margin-bottom: 24px;
    margin-left: 0px;
    margin-right: 0px;
    width: 630px;
}

.payment legend {
    color: #8B4448;
    font-family: Domine;
    font-size: 21px;
    font-weight: 700;
    line-height: 31.5px; 
    margin-top: 0px;
    margin-bottom: 24px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px;
    width: 630px;
}

.name label {
    margin-top: 0px;
    margin-bottom: 6px;
    margin-left: 0px;
    margin-right: 0px;
}

.name span {
    color: #B91C1C;
    margin-top: 0px;
    margin-bottom: 6px;
    margin-left: 11px;
    margin-right: 490px;
}

.name input {
    border: 1px solid #D1D5DB;
    background: #F9FAFB;
    margin-top: 0px;
    margin-bottom: 24px;
    margin-left: 0px;
    margin-right: 0px;
    width: 630px;
    height: 40px;
    flex-shrink: 0;
}

.address label {
    margin-top: 0px;
    margin-bottom: 6px;
    margin-left: 0px;
    margin-right: 269px;
}

.address input {
    border: 1px solid #D1D5DB;
    background: #F9FAFB;
    margin-top: 0px;
    margin-bottom: 24px;
    margin-left: 0px;
    margin-right: 26px;
    width: 300px;
    height: 40px;
    flex-shrink: 0;
}

.city label {
    margin-top: 0px;
    margin-bottom: 6px;
    margin-left: 0px;
    margin-right: 272px;
}

.city input {
    border: 1px solid #D1D5DB;
    background: #F9FAFB;
    margin-top: 0px;
    margin-bottom: 24px;
    margin-left: 0px;
    margin-right: 0px;
    width: 300px;
    height: 40px;
    flex-shrink: 0;
}

.email label {
    margin-top: 0px;
    margin-bottom: 6px;
    margin-left: 0px;
    margin-right: 0px;
}

.email span {
    color: #B91C1C;
    margin-top: 0px;
    margin-bottom: 6px;
    margin-left: 16px;
    margin-right: 190px;
}

.email input {
    border: 1px solid #D1D5DB;
    background: #F9FAFB;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 26px;
    width: 300px;
    height: 40px;
    flex-shrink: 0;
}

.phone label {
    margin-top: 0px;
    margin-bottom: 6px;
    margin-left: 0px;
    margin-right: 0px;
}

.phone span {
    color: #B91C1C;
    margin-top: 0px;
    margin-bottom: 6px;
    margin-left: 16px;
    margin-right: 122px;
}

.phone input {
    border: 1px solid #D1D5DB;
    background: #F9FAFB;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    width: 300px;
    height: 40px;
    flex-shrink: 0;
}

.shipping {
    margin-top: 0px;
    margin-bottom: 48px;
    margin-left: 0px;
    margin-right: 0px;
}

.card label {
    margin-top: 0px;
    margin-bottom: 6px;
    margin-left: 0px;
    margin-right: 479px;
    width: 151px;
}

.card input {
    border: 1px solid #D1D5DB;
    background: #F9FAFB;
    margin-top: 0px;
    margin-bottom: 24px;
    margin-left: 0px;
    margin-right: 0px;
    width: 630px;
    height: 40px;
    flex-shrink: 0;
}

.expiry label {
    margin-top: 0px;
    margin-bottom: 6px;
    margin-left: 0px;
    margin-right: 244px;
}

.expiry input {
    border: 1px solid #D1D5DB;
    background: #F9FAFB;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 26px;
    width: 300px;
    height: 40px;
    flex-shrink: 0;
}

.code label {
    margin-top: 0px;
    margin-bottom: 6px;
    margin-left: 0px;
    margin-right: 197px;
}

.code input {
    border: 1px solid #D1D5DB;
    background: #F9FAFB;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    width: 300px;
    height: 40px;
    flex-shrink: 0;
}

.billing {
    margin-top: 0px;
    margin-bottom: 45px;
    margin-left: 0px;
    margin-right: 0px;
}

.btn {
    font-weight: 700;
    border-radius: 4px;
    border: none;
    background: #AAD5D3;
    margin-top: 0px;
    margin-bottom: 75px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px;
    width: 630px;
    height: 40px;
    flex-shrink: 0;
}

.btn:hover {
    background-color: #91B4B2;
    color: #FFFFFF;
}