/************************ BODY: Start **************************//************************ BODY: Start **************************/
/************************ BODY: Start **************************//************************ BODY: Start **************************/
/************************ BODY: Start **************************//************************ BODY: Start **************************/
body {
    margin: 0.5rem;
    font-family: "Ubuntu", serif;
    background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.889), #071f32); /* Default Dark with a tint indigo */
    color: white;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/* Light theme colors */
body.light {
    background: linear-gradient(to bottom right, rgb(18, 133, 199, 0.2), rgba(203, 119, 201, 0.2));
    color: black;
}

.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}

.shadows-into-light-regular {
    font-family: "Shadows Into Light", serif;
    font-weight: 400;
    font-style: normal;
}

footer {
    padding-top: 5rem;
    padding-bottom: 2rem;
    text-align: center;
}
/************************ BODY: End **************************//************************ BODY: End **************************/
/************************ BODY: End **************************//************************ BODY: End **************************/
/************************ BODY: End **************************//************************ BODY: End **************************/

/******************** NAV: Start **********************//******************** NAV: Start **********************/
/******************** NAV: Start **********************//******************** NAV: Start **********************/
/******************** NAV: Start **********************//******************** NAV: Start **********************/
/* Section: Nav *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
nav {
    display: flex;
    align-items: center;
    margin-bottom: 1rem; /* Added margin to create space below the navbar */
}

.nav-title {
    font-size: 1em;
    margin-right: auto;
    padding-left: 1.6em;
    font-weight: bold;
}
/* Nav controls (container) *//**//**//**//**//**//**//**//**//**//**/
.nav-controls {                                                 /**/
    margin: 0 auto; /* Center the links */                      /**/
    padding-right: 1.6rem;                                      /**/
    font-size: 1.5em;                                           /**/
}                                                               /**/
.nav-controls ul {                                              /**/
    list-style: none;                                           /**/
}                                                               /**/
.nav-controls li {                                              /**/
    display: inline;                                            /**/
    padding: 1em;                                               /**/
}                                                               /**/
.nav-controls a {                                               /**/
    color: #cccccc8a;                                         /**/
    text-decoration: none;                                      /**/
    margin: 0 20px;                                             /**/
}                                                               /**/
body.light .nav-controls a {                                    /**/
    color: rgb(91, 91, 91);                                 /**/
}                                                               /**/
/* Effects & states */                                          /**/
.nav-controls a:hover, .nav-controls a.active {                                         /**/
    color: white;                                           /**/
}                                                               /**/
body.light .nav-controls a:hover, body.light .nav-controls a.active {                              /**/
    color: coral;                                           /**/
}                                                               /**/
                                                                /**/
/* Objects: mobile menu *//**//**//**//**//**//**//**//**/      /**/
.mobile-menu {                                      /**/        /**/
    display: none;                                  /**/        /**/
    cursor: pointer;                                /**/        /**/
    padding: 0.5rem;                                /**/        /**/
    justify-self: end;                              /**/        /**/
    border-radius: 10px;                            /**/        /**/
}                                                   /**/        /**/
/* Effects & states */                              /**/        /**/
.mobile-menu:hover {                                /**/        /**/
    background-color: rgba(166, 174, 184, 0.3); /**/        /**/
}                                                   /**/        /**/
body.light .mobile-menu:hover {                     /**/        /**/
    background-color: rgba(166, 174, 184, 0.3); /**/        /**/
}                                                   /**/        /**/
.nav-controls.active li {                           /**/        /**/
    display: block;                                 /**/        /**/
}                                                   /**/        /**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**/        /**/
                                                                /**/
/* Objects: theme toggle *//**//**//**//**//**//**//**/        /**/
/* - The switch - the box around the slider */      /**/        /**/
.switch {                                           /**/        /**/
    margin-left: 1.2em;                             /**/        /**/
    position: relative;                             /**/        /**/
    display: inline-block;                          /**/        /**/
    width: 40px;                                    /**/        /**/
    height: 24px;                                   /**/        /**/
}                                                   /**/        /**/
/* Hide default HTML checkbox */                    /**/        /**/
.switch input {                                     /**/        /**/
    opacity: 0;                                     /**/        /**/
    width: 0;                                       /**/        /**/
    height: 0;                                      /**/        /**/
}                                                   /**/        /**/
/* Effects & states */                              /**/        /**/
input:checked + .slider {                           /**/        /**/
    background-color: coral;                    /**/        /**/
}                                                   /**/        /**/
input:focus + .slider {                             /**/        /**/
    box-shadow: 0 0 1px #ff7f50;                  /**/        /**/
}                                                   /**/        /**/
input:checked + .slider:before {                    /**/        /**/
    -webkit-transform: translateX(26px);            /**/        /**/
    -ms-transform: translateX(26px);                /**/        /**/
    transform: translateX(16px);                    /**/        /**/
}                                                   /**/        /**/
/* - The slider - the moving part */                /**/        /**/
.slider {                                           /**/        /**/
    position: absolute;                             /**/        /**/
    cursor: pointer;                                /**/        /**/
    top: 0;                                         /**/        /**/
    left: 0;                                        /**/        /**/
    right: 0;                                       /**/        /**/
    bottom: 0;                                      /**/        /**/
    background-color: #114671;                  /**/        /**/
    -webkit-transition: .4s;                        /**/        /**/
    transition: .4s;                                /**/        /**/
}                                                   /**/        /**/
/* Effects & states */                              /**/        /**/
.slider:before {                                    /**/        /**/
    position: absolute;                             /**/        /**/
    content: "";                                    /**/        /**/
    height: 16px;                                   /**/        /**/
    width: 16px;                                    /**/        /**/
    left: 4px;                                      /**/        /**/
    bottom: 4px;                                    /**/        /**/
    background-color: white;                    /**/        /**/
    -webkit-transition: .4s;                        /**/        /**/
    transition: .4s;                                /**/        /**/
}                                                   /**/        /**/
/* - Rounded sliders */                             /**/        /**/
.slider.round {                                     /**/        /**/
    border-radius: 34px;                            /**/        /**/
}                                                   /**/        /**/
/* Effects & states */                              /**/        /**/
.slider.round:before {                              /**/        /**/
    border-radius: 50%;                             /**/        /**/
}                                                   /**/        /**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**/        /**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/******************** NAV: End **********************//******************** NAV: End **********************/
/******************** NAV: End **********************//******************** NAV: End **********************/
/******************** NAV: End **********************//******************** NAV: End **********************/

.contact {
    display: flex;
    padding-top: 5em;
    justify-content: center;
    align-items: center;
}
.contact-info {
    padding-bottom: 3rem;
    display: flex;
}
img {
    width: 20vw;
    height: auto;
}
@keyframes blink {
    0% { background-color: rgb(29, 148, 65); }
    50% { background-color: transparent; box-shadow: none;}
    100% { background-color: rgb(29, 148, 65); }
  }
.contact-color {
    width: 20px;
    height: 20px;
    margin: 2rem;
    /* justify-self: end; */
    border-radius: 25px;
    /* background-color: rgb(25, 37, 102); */
    background-color: rgb(29, 148, 65);
    /* transition: background 3s ease; */
    animation: blink 1.5s infinite;
    box-shadow: 0 0 15px rgb(29, 148, 65);
}
h2 {
    font-size: 30px;
}
h3 {
    font-size: 3rem;
}

/********************** MOBILE RESPONSIVE: Start *********************//********************** MOBILE RESPONSIVE: Start *********************/
/********************** MOBILE RESPONSIVE: Start *********************//********************** MOBILE RESPONSIVE: Start *********************/
/********************** MOBILE RESPONSIVE: Start *********************//********************** MOBILE RESPONSIVE: Start *********************/
.mobile-filters-container {
    display: flex;
}

/* Turn on mobile menu */
@media only screen and (max-width: 1422px) {
    /* NAV *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
    nav {
        padding-top: 1em;
    }
    .mobile-menu {
        display: flex;
        margin-right: 0.5em;
    }
    .nav-controls {
        display: none;
    }
}
@media only screen and (max-width: 1054px) {

    .nav-title {
        padding-left: 0em;
    }
    /* SIDEBAR *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
    .mobile-filters-container {
        justify-content: center;
    }

    img {
        width: 40vw;
    }
}
@media only screen and (max-width: 700px) {

    .nav-controls{
        font-size: 1rem;
    }

    .contact {
        display: block;
        justify-items: center;
        padding-top: 2rem;
    }
    img {
        width: 40vw;
    }
    .contact-info {
        padding-top: 2rem;
    }
}
/********************** MOBILE RESPONSIVE: End *********************//********************** MOBILE RESPONSIVE: End *********************/
/********************** MOBILE RESPONSIVE: End *********************//********************** MOBILE RESPONSIVE: End *********************/
/********************** MOBILE RESPONSIVE: End *********************//********************** MOBILE RESPONSIVE: End *********************/