@charset "utf-8";
/* || FONT INITIALISATION */

@font-face {
	font-family: 'Roboto';
	src: url("../fonts/Roboto-Regular.ttf") format('truetype');
}

@font-face {
	font-family: 'Noto';
	src: url("../fonts/NotoSans-Regular.ttf") format('truetype');
}

@font-face {
	font-family: 'Oswald';
	src: url("../fonts/Oswald-Light.ttf") format('truetype');
}

@font-face {
    font-family: 'Rubik';
    src: url("../fonts/Rubik-VariableFont_wght.ttf") format('truetype');
}

@font-face {
    font-family: 'Baguet';
    src: url("../fonts/Baguet-Script-Italic.otf") format('opentype');
}

@font-face {
    font-family: 'ArialN';
    src: url("../fonts/Arialn.ttf") format('truetype');
}

@font-face {
	font-family: 'Takane';
	src: url("../fonts/ethnocentric-Regular.ttf") format('truetype');
}

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

/* || VARIABLES */
:root {
    /* COLOURS */
    --NAVCOLOUR: #FFFFFF;
    --FOOTER-COLOUR: #55B4D4;
    --TOTOP-COLOUR: #4490AA;
    --ANGELS-COLOUR: #65CCEF;
    --SUN-COLOUR: #F9C141;
    --ECO-TEXT: #0F7699;
    --MENU-ITEMS-HOVER: #333333;
    
    /* FONTS */
    --FF: 'Roboto', sans-serif;
    --FF-MENUITEMS: 'Noto', sans-serif;
    --FF-CONSTITUTION: 'Oswald', sans-serif;
    --FF-SPONSORS: 'Rubik', sans-serif;
    --FF-PBO-HEADING: 'Baguet', sans-serif;
    --FF-PBO-TXT: 'ArialN', sans-serif;
    --FF-TAKANE-H1: 'Takane', sans-serif;
}

/* || GENERAL STYLES */
/*body {
    position: relative;
}
*/
html,
body {
    overflow-x: hidden;
    font-family: var(--FF);
}

.no-wrap {
    white-space: nowrap;
}

hr {
	border: none;
	height: 3px;
	background-color: var(--ANGELS-COLOUR);
}

.center-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-stuff {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* || NAVBAR */
.navbar {
    background-color: var(--NAVCOLOUR)!important;
}

.brand-margin {
    margin-left: 20px;
}

.nav-links-margin {
    margin-right: 80px;
}

.navbar-light .navbar-nav .nav-link:hover {
    border-bottom: 2px solid var(--ANGELS-COLOUR);
}

.txt-bottom {
    margin-top: auto; /* Push button to the bottom */
}

#sunshine-angels-top {
    margin-top: 100px;
}

/* || GO-TO-TOP BUTTON */
.to-top-btn {
  position: fixed;
  bottom: 35px;
  right: 35px;
  border-radius: 50%;
  cursor: pointer;
  height: 50px;
  width: 50px;
  background: #D8D8D8;
  border: 0px solid #D8D8D8;
  display: none;
  justify-content: center;
  align-items: center;
  opacity: 0.7;
  outline: none;
}

.to-top-btn img {
  width: 30px;
  height: 15px;
}

.to-top-btn:hover {
	background-color: darkgray;
    transition: background-color 0.4s ease;
}

.to-top-btn:focus:not(:focus-visible) {
  outline: none; /*:focus-visible, removes the black outline for non-keyboard interactions */ 
}

/* || FOOTER AREA */
.footermain {
    background-color: var(--FOOTER-COLOUR);
}

.footer-links ul {
    list-style-type: none;
    padding: 0;
}

.footer-links a {
    text-decoration: none;
    color: initial; /* Use 'initial' to maintain the default text color */
    transition: color 0.3s ease; /* Smooth color transition on hover */
}

.footer-links a:hover {
    color: var(--SUN-COLOUR); /* Change to the desired color on hover */
}

.footer-links {
    text-align: center; /* Center the text within the footer-links div */
}

.footer-right {
    display: inline; /* Ensure it's an inline element for centering */
    text-align: left; /* Align text within the container to the left */
}

/* || FOOTER - SOCIAL ICONS */
.footer-copyright {
    text-align: center;
}

.footer-social {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Move icons to the right */
    margin-left: 200px;
}

.footer-social a {
    margin-right: 20px; /* Adjust the spacing between social media icons */
}

/* Adjust the size of the social media images */
.footer-social .social-icon img {
  width: 30px; /* Adjust the width to your preference */
  height: auto; /* Maintain aspect ratio */
}

.copysocial {
    padding-bottom: 27px;
}
.navbar-nav.ml-auto.nav-links-margin .nav-item .nav-link {
    color: black!important;
    font-family: var(--FF-MENUITEMS);
    font-weight: bolder;
}
.navbar-nav.ml-auto.nav-links-margin .nav-item .nav-link:hover  {
    color: var(--SUN-COLOUR)!important;
    font-family: var(--FF-MENUITEMS);
    font-weight: bolder;
}

.container .row.mt-3.mb-3 .col-xl-12.about-sunshine {
    font-family: var(--FF);
    font-size: 20px;
}

/* Style for email links */
a[href^="mailto:"] {
    color: var(--ANGELS-COLOUR); /* Set your desired text color */
    text-decoration: none; /* Remove the underline */
    transition: color 0.3s; /* Smooth color transition effect */
}

a[href^="mailto"]:hover {
    color: var(--SUN-COLOUR); /* Change color to orange on hover */
}


.spacer-division {
    height: 200px;
}

/* || SCHOOLS SECTION */
.takane-h1 {
    font-family: var(--FF-TAKANE-H1);
    color: #005AAA;
    font-size: 4rem;
}

.takane-h2 {
    font-family: var(--FF-TAKANE-H1);
    color: #005AAA;
    font-size: 2.5rem;
}

.takane-academy-logo-section a {
    text-decoration: none;
}


/* || SUNSHINE ANGELS CONSTITUTION */
/* Define styles for the sunshine-npc class */
.sunshine-npc {
    font-family: var(--FF-CONSTITUTION);
    color: var(--SUN-COLOUR);
    font-style: italic;
    font-size: 3.5em;
}

.sunshine-pbo {
    font-family: var(--FF);
    color: var(--SUN-COLOUR);
    font-style: italic;
    font-size: 32px;
}

.sunshine-pbo-sub {
    font-family: var(--FF);
    color: black;
    font-weight: bold;
    font-size: 16px;
}

/* Define styles for the sunshine-reg class */
.sunshine-reg {
    font-size: 1.5em; /* Adjust the font size as needed */
    font-weight: 600;
}

/* Center the text vertically within the .sunshine-reginfo element */
.sunshine-reginfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*align-items: center;*/
    height: 100%;
    padding-top: 30px;    
}

.sun-members {
    font-size: 12px;
}

.card-block{
    margin-left: 0;
}

.line-heading {
    font-size: 1.8em;
}

.sunshine-committee {
    text-align: center;
}

/* || SPONSORS */
.sponsor-top {
    font-family: var(--FF-SPONSORS);
    font-size: 1.2em;
}

.sponsor-intro {
    text-align: left; /* Keep the text left-justified */
    margin: 0 auto; /* Center the text horizontally */
    max-width: 700px;
}

.krones-sa .row {
    display: flex;
    align-items: flex-end; /* Align to the bottom of the container */
}

.krones-sa .col-xl-6 {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align to the start (left) of the container */
    height: 100%;
}

.krones-sa .col-xl-6 img {
    width: 100%;
    object-fit: cover;
    object-position: bottom; /* Align the image to the bottom */
    border-radius: 20px;
}

/* .row .col-xl-6 .img-fluid {
    border-radius: 20px;
} */

/* .krones-sa-img {
    border-radius: 20px;
} */


.row .col-xl-6 .img-fluid.img-left-top {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

/* || MAIL SENT */
.container .mail-sent .mail-thanks {
    background-color: floralwhite;
    font-weight: bolder;
    text-align: center;
    justify-content: center;
}
/* .container #takane-academy .row.takane-academy-logo-section.center-stuff {
    background-image: -webkit-linear-gradient(0deg,rgba(0,90,170,1.00) 0%,rgba(255,209,2,1.00) 50.26%,rgba(220,187,37,1.00) 98.96%);
    background-image: -moz-linear-gradient(0deg,rgba(0,90,170,1.00) 0%,rgba(255,209,2,1.00) 50.26%,rgba(220,187,37,1.00) 98.96%);
    background-image: -o-linear-gradient(0deg,rgba(0,90,170,1.00) 0%,rgba(255,209,2,1.00) 50.26%,rgba(220,187,37,1.00) 98.96%);
    background-image: linear-gradient(90deg,rgba(0,90,170,1.00) 0%,rgba(255,209,2,1.00) 50.26%,rgba(220,187,37,1.00) 98.96%);
} */

.takane-academy-logo-section {
    background-image: -webkit-linear-gradient(0deg,rgba(0,90,170,1.00) 10.36%,rgba(255,209,2,1.00) 50.78%,rgba(184,161,58,1.00) 98.96%);
    background-image: -moz-linear-gradient(0deg,rgba(0,90,170,1.00) 10.36%,rgba(255,209,2,1.00) 50.78%,rgba(184,161,58,1.00) 98.96%);
    background-image: -o-linear-gradient(0deg,rgba(0,90,170,1.00) 10.36%,rgba(255,209,2,1.00) 50.78%,rgba(184,161,58,1.00) 98.96%);
    background-image: linear-gradient(90deg,rgba(0,90,170,1.00) 10.36%,rgba(255,209,2,1.00) 50.78%,rgba(184,161,58,1.00) 98.96%);
    border-radius: 10px;
}

.takane-heading-img {
    animation: slideInFromLeft 2s ease-in;
}

.takane-heading-txt1 {
    animation: slideInFromRight 2s ease-in;
}

.takane-heading-txt2 {
    transform: translateX(100%);
    animation: slideInFromRight 1s ease-in forwards;
    animation-delay: 1s;
}

@keyframes slideInFromLeft {
    0% {
      transform: translateX(-100%);
    }
  
    100% {
      transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}  



/* || MEDIA QUERIES */
/* Center contents of col-sm-6 elements on smaller screens */
@media (max-width: 576px) {
    
    .col-sm-6 .card-block {
        display: inline-block; /* Make the card content inline-block */
        text-align: left; /* Left-align the text within the card */
        margin: 0 auto;
    }
 
}