/*************** GLOBAL ***************/

*
{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body
{
	background: url(../i/svg/compass-mark-transparent.svg) no-repeat -275px, url(../i/background-img.jpg) no-repeat center/cover;
	font-family: montserrat, sans-serif, Arial;
	font-size: 16px;
	font-weight: 400;
}

.hidden
{
	display: none;
	opacity: 0;
}

p {color: #fff; line-height: 150%;}
p a { color: #fff; }

/*************** INDEX ***************/

#container
{
	position: relative;
	max-width: 1220px;
    min-height: 100vh;
	padding: 20px;
    margin: auto;
}

.home
{
	padding-top: 70px;
	display: flex;
    gap: 2rem;
	justify-content: space-between;
}

.left
{
	width: 460px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6rem;
}

.left p {line-height: 120%;}

.left h2
{
	color: #ffffff;
	padding: 35px 0;
	font-family: 'cardo';
	font-size: 30px;
	font-weight: 400;
}

.contacts
{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contacts.--mobile {display: none;}


.right
{
    flex: 1;
	max-width: 590px;
}

.right > p
{
	color: #ffffff;
	padding: 35px 0;
	border-bottom: solid 1px #ffffff;
	font-weight: 200;
    line-height: 150%;
}

.right > .dropdown
{
	position: relative;
	padding: 35px 0;
	color: #ffffff;
}

.right > .dropdown a
{
	text-decoration: none;
	cursor: pointer;
}

.right > .dropdown ul
{
	list-style: none;
}

.right > .dropdown a > img
{
	width: 15px;
	height: 10px;
	margin-left: 20px;
}

.right > .dropdown .dropdownContent
{
	left: 0;
	display: none;
	position: absolute;
	margin-top: 20px;
	padding: 20px 35px;
	background-color: #ffffff;
}

.right > .dropdown .dropdownContent.show ul > li a
{
	display: flex;
    justify-content: space-between;
	color: #007b84 !important;
}

.right > .dropdown .dropdownContent.show ul > li:first-of-type img
{
	margin-left: 24px;
}

.right > .dropdown .dropdownContent.show ul > li:last-of-type img
{
	margin-left: 16px;
}

.right > .dropdown .dropdownContent.show
{
	display: block;
}

footer
{
	margin-top: 21px;
}

footer > h3
{
	margin-bottom: 20px;
	color: #ffffff;
	font-family: 'cardo';
	font-size: 18px;
	font-weight: 600;
}

footer > div
{
	display: flex;
	flex-flow: row;
	justify-content: space-between;
}

footer > div > div
{
	max-width: 325px;
	padding: 15px 0 0;
	padding-right: 45px;
}

footer > div > div:last-of-type
{
	padding-right: 0;
	padding-left: 45px;
}

footer p
{
	color: #ffffff;
	font-size: 14px;
}

footer > div > div:not(:last-of-type) > p:nth-of-type(2), footer > div > div:nth-of-type(3) > p:nth-of-type(2)
{
	margin-top: 20px;
}

footer > div > div:first-of-type > p:not(:last-of-type)
{
	max-width: 176px;
}

footer > div > div > p:not(:last-of-type)
{
	max-width: 200px;
}

footer > div > div > p:first-of-type, footer > div > div:first-of-type > p:first-of-type
{
	max-width: 279px;
}

/*************** INDEX - MOBILE ***************/

@media screen and (max-width: 980px)
{
	.home
	{
		flex-flow: column wrap;
	}

	.left
	{
		width: 100%;
	}

	.right
	{
		max-width: 100%;
	}

	.right > .dropdown .dropdownContent
	{
		left: 0;
	}

	.contacts.--mobile {
        display: flex;
        flex-flow: row wrap;
        gap: 2rem 10rem;
        margin-bottom: 3rem;
    }
    .contacts.--desktop {display: none;}
}

@media screen and (max-width: 600px)
{
	footer
	{
		margin-top: 100px;
		text-align: center;
	}

	footer > div
	{
		flex-flow: column wrap;
		justify-content: center;
	}

	footer > div > div
	{
		width: 100%;
		padding: 0;
	}
	
	footer > div > div p
	{
		margin: auto;
	}
}