@font-face {
    font-family: 'montserratthin';
    src: url('../font/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

body{
        font-size:2em;
        font-family: 'montserratthin';
        background-color: #091A27;
        margin: 0;
        padding-left: 0px;
        padding-right: 0px;
        -webkit-text-size-adjust: 100%;
}

@media screen and (max-width: 1150px) {
        body{
                width: 100%;
        }
}

@media screen and (min-width:1150px) {
        body {
                width: 1150px;
                padding-left: calc(50% - 575px);
        }
}

.body {
        position:relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: auto;
}

.header-logo {
        max-width: 80%;
        margin-top:0.5rem;
        margin-bottom:0.5rem;
        width: auto;
        height: auto;
        margin-left: 10%;
        margin-right: 10%;
        padding: 0;
        z-index:1;
}

.bg-img{
        display: block;
        filter: grayscale(100%);
        width: 100%;
}

.bg-img-tag-index {
        width: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);


}


.bg-img-tag-index-img {
        width:100%;
        height:100%;
        position: absolute;
        opacity: 70%;
        background-image: url("../img/red-overlay-tag.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: 50% 0;
}

.bg-img-tag-index img{
        width: 100%;
        opacity: 70%;
}

.bg-img-tag-index h1{
        text-align:center;
        font-size: 1.33rem;
        position:relative;
        top: 0%;
        margin-left: 5%;
        margin-right: 5%;
        color:white;
        opacity:1;
}

.bg-img-tag-services {

        position: absolute;
        top: 0;
        right: 0%;
        width: 37.5rem;

}

.bg-img-tag-services img{
        width: 100%;
        opacity: 70%;
}

.bg-img-tag-services > .img {
        background-image: url("../img/big-red-overlay-tag.png");

}

.bg-img-tag-services > .img {
        width:100%;
        height:100%;
        position: absolute;
        opacity: 70%;
        background-image: url("../img/big-red-overlay-tag.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: 50% 0;
        top:0;
        right:0;
        padding:0;

}

.bg-img-tag-services > div{
        text-align:center;
        font-size: 1.5rem;
        font-weight: bold;
        position:relative;
        top: 0%;
        color:white;
        opacity:1;
        padding-left:17.5%;
        padding-right:17.5%;
        padding-bottom:5%;
        padding-top:2rem;
}

.bg-img-tag-services > div > h1 {
        margin:0

}


@media screen and (max-width: 1200px) {

}

@media screen and (max-width: 950px) {
        .bg-img-tag-services > .img {
                background-color:#B82025;
        }

        .bg-img-tag-services > div {
                padding-left:2rem;
                padding-right:2rem;
                font-size:1.25rem;
                padding-top:1rem;
                padding-bottom:1rem;
        }

        .bg-img-tag-services {
                position: relative;
                width:100%;
        }


}

.intro {
        background-color:white;
        opacity: 0.8;
        padding: 0;
}

.intro > p {
        width: 75%;
        font-size: 1.25rem;
        font-weight: normal;
        margin: 0;
        padding: 5%;
        line-height: 2rem;
        text-indent: 2rem;
}

.intro-tag{
        height: 120%;
        position: absolute;
        top:-10%;
        right: 5%;
        width: 15%;
}

@media only screen and (max-width:600px) {
        .intro-tag{
                display: none;
        }

        .intro > p {
                width: auto;
        }
}

.portfolio-intro {
        background-color:white;
        height:4rem;
        opacity: 0.8;
}

.portfolio-intro p {
        width: 75%;
        font-size: 1.33vw;
        font-weight: bold;
        line-height: 2vw;
}

.portfolio-intro-tag{
        z-index:2;
        height: 130%;
        position: absolute;
        top:-15%;
        right: 15%;
}




.contact-intro {
        background-color:white;
        opacity: 0.8;
        padding: 1rem;
        padding-left: 8%;
}

.contact-intro p {
        width: 75%;
        font-size: 1.33rem;
        font-weight: bold;
        line-height: 2rem;
}

.contact-intro-tag{
        height: 120%;
        position: absolute;
        top:-20%;
        right: 10%;
}

@media only screen and (max-width: 950px) {
        .contact-intro-tag{
                display:none;
        }
        .contact-intro > p {
                width:100%;
                text-align:center;
        }

        .contact-intro {
                padding-right: 8%;
        }
}


.index-bar {
        display:flex;
        flex-wrap: wrap;
        justify-content: space-around;
        flex-direction:row;
        background-color:white;
        opacity: 0.8;
        padding: 1vw;
}

.index-bar > div {
        display:flex;
        flex-direction: column;
        justify-content: center;
        margin:0vw;
        padding:1rem;
        width:200px;
}

.index-bar > div > img {
        width:175px;
        display:block;
        margin:auto;
        margin-top:0;
        margin-bottom:0;
}

.index-bar > div > p {
        text-align:center;
        font-size: 1.25rem;
        font-weight: bold;

}


.services-list {
        background-color: #FFF;
        opacity: 0.8;
        padding: 2.5%;
        padding-left: 7.5%;
        padding-right: 7.5%;
}

.services-list > h2 {
        font-weight: bold;
        font-size: 1.75rem;
        margin-bottom: 1rem;
        text-decoration: underline;
        text-align:center;
}

.services-list p{
        line-height:2.33rem;
        margin-top:0;
        font-size: 1.33rem;
		padding-bottom: 1.5rem;
}
.services-list > .pricing > p {
        text-align:center;
}

@media screen and (max-width: 500px) {
        .services-list > .pricing > .slash {
                display:none;
        }
}


.about-tag {
        position:relative;
        width:80%;
        margin:auto;
        margin-top:1.5rem;
        margin-bottom:1.5rem;
        z-index:1;
}

.about-tag > .img {
        width:100%;
        height:100%;
        position: absolute;
        opacity: 70%;
        background-image: url("../img/wide-red-tag.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: 50% 0;
        top:0;
        right:0;
        padding:0;
        z-index:-1;
}

.about-tag > div:not(.img){
        position:relative;
        color:#FFF;
        text-align:center;
        padding-left:4%;
        padding-right:4%;
}

.about-tag > div:not(.img) > h1 {
        font-size:1.33rem;
}

.about-tag > div:not(.img) > h2 {
        font-size:1rem;
}

.about-list{
        background-color: #FFF;
        opacity: 0.8;
        padding: 7%;
        display: flex;
        gap: 3rem;
        flex-direction:column;
        justify-content:space-evenly;

}

.about-list > div{
        display:flex;
        width:100%;
        flex-direction: row;
        justify-content:center;
        gap: 2.5rem;
}

.about-list > div > img {
        width:175px;
        filter: grayscale(100%);
}

.about-list > div > div {
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap: 0;
        width:20rem;
        text-align:center;
}

.about-list > div > div > h1 {
        margin-bottom:0;
        font-size: 2rem;
}

.about-list > div > div > h2{
        margin-top:0.75rem;
        font-size:1.33rem;
}

@media only screen and (max-width: 550px) {
        .about-list > div {
                flex-direction:column;
                align-items:center;
                gap:0;
        }

        .about-list > div > img {
                width:250px;
        }
        .about-list {
                padding-top:12%;
        }
        .about-list > div > div {
                width:100%;
        }
}
.pricing {
        gap:1.66rem;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
}

@media only screen and (max-width: 405px) {
        .pricing {
                gap:0;
        }
}

nav {
        display: flex;
        width: 100%;
        justify-content: space-evenly;
        border-bottom: 2px solid white;
}

nav a {
        text-decoration: none;
        font-weight:bold;
        font-size: 2rem;
        color: #FFF;
}

nav a:hover{
        color: #B82025;
}

nav > .icon {
        display:none !important;
        color:#FFF;
}

nav a img {
        height:2.5rem;
}


@media only screen and (max-width: 950px) {
        nav > a:not(.nav-active):not(.icon) {
                display: none !important;
        }

        nav > .icon {
                display: block !important;

        }
        nav {
                justify-content: space-between;
        }
}

.responsive {
        flex-direction: column;
}

.responsive > *:not(.nav-active):not(.icon) {
        display: block !important;
}

.responsive > .icon {
        position:absolute;
        top:0;
        right:0;
        display: block !important;
}

.topnav {
        position: sticky;
        top:0;
        z-index:1000;
        background-color: #091A27;

}

nav > * {
        margin: auto;
        margin-left:10px;
        margin-right:10px;
        display:flex;
}


footer {
        z-index:1;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        background-color: #B82025;
}

footer > p, footer > div, footer > div > a > i, footer > div > a {
        padding: 0;
        margin: 0;
        color: #FFF;
        font-weight: bold;
        font-size:1rem;
        text-decoration: none;

}

footer > div > a > i {
        margin-left:0.5rem;
        margin-right:0.5rem;
}

footer > div {
        display: flex;
        justify-content: space-evenly;
        flex-direction: row;
        padding-top: 0.165vw;
        padding-bottom: 0.165vw;
}

footer > div > a {
        display: flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
}

.long-bg {
        position:absolute;
        background-image:url("../img/long-bg.png");
        background-size: 100% 100%;
        width:100%;
        height:100%;
        top:0;
        right:0;
}

.booking-section {
	background-color: #FFF;
	opacity: 0.8;
	padding:2.5%;
	padding-left: 7.5%;
	padding-right:7.5%;
	
	display:flex;
	flex-direction:column;
	align-items:center;
	
}

.booking-section > h2 {
	font-weight: bold;
	font-size:1.75rem;
	margin-bottom:1rem;
	text-align: center;
}

.booking-button{
	display:flex;
	flex-direction:column;
	align-items:center;
	width:25rem;
	max-width:100%;
	margin-top:15px;
}

.booking-button > a {
	background-color:#1877F2;
	color: #FFF;
	text-decoration:none;
	padding: 0.5rem;
	padding-left:0.8rem;
	padding-right:0.8rem;
	font-weight: bold;
	border-radius: 7px;
	box-shadow: 5px 5px 5px black;
}

.booking-button > p {
	margin-top:1.33rem;
	font-size: 1.2rem;
	text-align:center;
	color:#333;
}