@import url('https://fonts.googleapis.com/css2?family=Expletus+Sans&family=Nobile&family=Palanquin+Dark&display=swap');

/*
    Big Statement Fonts
    font-family: 'Palanquin Dark', sans-serif;
    Headers
    font-family: 'Expletus Sans', sans-serif;
    General Font
    font-family: 'Nobile', sans-serif;
*/
html {
    font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
h1, h2, h3 {
    font-family: 'Expletus Sans', sans-serif !important;
}
p {
    font-family: 'Nobile', sans-serif;
}
a {
    transition: 0.5s ease-in all;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    font-family: 'Nobile', serif !important;
    margin-bottom: 60px;
}
nav {
    font-family: 'Palanquin Dark', sans-serif;
    box-shadow: 1px 6px 25px 0px rgba(0,0,0,0.45);
    background-color: #266e51 !important;
}
nav a,button {
    color: #ededed !important;
}
.hero-image {
    background: url('../images/background/blob-scene-haikei.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 40vh;
}

.text-container {
    width: 30%;
    height: auto;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 30%;
    text-align: center;
}

@media only screen and (max-width: 1057px) {

    .text-container {
        width: 100%;
        margin: 0;
    }
}

/* Home Page */
.header-styling {
    font-family: 'Palanquin Dark', sans-serif;
    color: #ffb04e;
    font-size: 2rem;
}
.top-info {
    display: inline-flex;
    margin: auto;
    width: 100%;
}
.card-style {
    margin: auto !important;
    width: 140px !important;
    height: 140px !important;
    font-family: 'Expletus Sans', sans-serif;
}
.top-info a {
    text-decoration: none;
    border: none;
}
.top-info a:hover {
    text-decoration: none;
}
.top-info .card {
    border: 2px solid #bbbbbb;
    border-radius: 20px;
    width: 230px;
    height: 230px;
    text-align: center;
    top: -100px;
    box-shadow: 0px 0px 11px -5px rgba(0,0,0,0.75);
    transition: 0.5s ease-in-out all;
}
.top-info .card:hover {
    transform: scale(0.95);
    cursor: pointer;
}
.butten-style {
    width: 150px;
    background: radial-gradient(circle, rgba(20,68,48,1) 0%, rgba(38,110,81,0.9808298319327731) 43%, rgba(39,217,145,1) 100%);
    border-radius: 10px;
    border: none;
    padding: 10px;
    font-family: 'Palanquin Dark', sans-serif;
    box-shadow: 0px 0px 35px -11px rgba(0,0,0,0.75);
    transition: 0.8s ease-in-out all;
}
.butten-style:hover {
    transform: scale(1.07);
}
.logo-design {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #ffb04e;
    padding: 5px;
    margin: auto;
    vertical-align: middle;
}
.img-design {
    width: 100px !important;
    height: 100px !important;
    max-width: 100%; 
    max-height: 100%; 
}
.parallax {
    /* The image used */
    background-image: url('../images/background/ireland-1 (2).png');
    /* Set a specific height */
    min-height: 600px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.parallax2 {
    /* The image used */
    background-image: url('../images/background/ireland-1 (4).png');
    /* Set a specific height */
    min-height: 500px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px;
}
.parallax3 {
    /* The image used */
    background-image: url('../images/background/ireland-1 (5).png');
    /* Set a specific height */
    min-height: 500px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px;
}
.parallax4 {
    /* The image used */
    background: linear-gradient(rgb(255, 255, 255, 0.50), rgba(255, 255, 255, 0.50)), url('../images/background/ireland-1 (1).png');
    /* Set a specific height */
    min-height: 700px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px;
}
.right-border {
    border-top: 4px solid #dd7b02;
    border-right: 4px solid #dd7b02;
    border-bottom: 4px solid #dd7b02;
    border-left: 0;
    vertical-align: middle;
    text-align: center;
    margin: auto;
    width: 100px;
    height: 600px;
    float: right;
}
.left-border {
    border-top: 4px solid #dd7b02;
    border-right: 0;
    border-bottom: 4px solid #dd7b02;
    border-left: 4px solid #dd7b02;
    vertical-align: middle;
    text-align: center;
    margin: auto;
    width: 100px;
    height: 600px;
    float: left;
}

footer {
    background-color: #266e51;
    color: #161616 !important;
    text-align: center;
    padding: 20px;
}
.mobile-body {
    font-family: Arial, sans-serif;
    background-color: #1a1a1a;
    color: white;
    margin: 0;
    padding: 0;
    text-align: center;
}

.privacy-cont {
    margin-top: 7%;
}

.logo {
    max-width: 150px;
}

.policy {
    max-width: 600px;
    margin: 2rem auto;
    padding: 1rem;
    background-color: #2a2a2a;
    border-radius: 8px;
}

@media only screen and (max-width: 750px) {
    .mobile-body .container {
        margin-top: 20%;
    }
}

@media only screen and (max-width: 1057px) {
    .top-info {
        display: none !important;
    }
    .right-border, .left-border {
        height: 700px;
    }
}

@media only screen and (max-width: 750px) {

    .right-border, .left-border {
        display: none;
    }
}