@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap');

/* CSS is a language but it is connected to/points to html. In CSS, there are 
elements called rules like the code we have below. 
A rule is made up of 2 parts a selector and a declaration. In the case 
below, "body" is the selector and everything inside the curly brackets is 
the declaration. A declaration is made up of property:value pairs. The selector
defines what tag/element of the html file we want to format and the declaration
specifies how to format */
body {
    line-height: 1.8;
    color: #898fa1;
    font-size: 15px;
    font-family: 'Lato', sans-serif;
}

/* The following formats the heading texts */
h1,h2,h3,h4,h5,h6 {
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #11245A;
    font-family: "Prata", serif;
}

#services p {
    color: #11245A;
}

h7 {
    font-weight: 700;
    letter-spacing: 1px;
    color: #11245A;
}

/* The following code formats the anchor tag. An anchor tag is the text that
is hyperlinked. In the html file, if you look for a line with href or more specifically
<a href="https://www.youtube.com/@mrblahblahblah">Visit my channel</a> The text 'Visit my channel'
carries that link in href (short for hypertext reference) so that when someone clicks that text,
they are directed to the link. Anchor tags are denoted by the letter, "a" */

.titles-sm {
    font-size: 16px;
    letter-spacing: 1px;
}

a {
    font-weight: 700;
    transition: all 0.4s ease;
}

.superscript-above {
  position: relative; /* Position relative is used to slightly nudge elements in the top direction, bottom, right and left but since i want to get the superscript to the top of the word 'Ruth Gardens, i need to use both position relative and absolute because using only relative won't move it enough. Position absolute is used when you have 2 elements and you ant one to move around relative to (inside) another. The element that you assign the position relative becomes the anchor point so it cannot move, meaning you can't give it top, bottom etc. Those dimensions have to be given to the element you assign the position absolute. E.g., if you give a square, inside a circle, the top=30px, the square will move 30px down from the top edge of the circle  */
  display: inline-block;
}

.superscript-above sup {
  position: absolute;
  top: 0;   /* Adjust this to move it higher or lower */
  left: 0px;     /* Align horizontally */
  font-size: 0.6em; /* Optional: make it smaller */
}

/*
max-aspect-ratio: 16/9
@media (max-width: 576px) {
    .superscript-above {
        left: 0px;
    }
}*/

img {
    width: 100%;
}

#contact img {
    opacity: 0.5;
}

small {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
}

section {
    padding-top: 100px;
    padding-bottom: 100px;
    
}

.navbar {
    padding-top: 35px;
    border-bottom: 1px solid #00000033;
    position: fixed;         
    top: 0;
    width: 100%;
    z-index: 10;
}

@media (max-width: 576px) {
    .navbar {
        padding-left: 0px;
    }
}

/* The logo text is the "RUTH GARDENS" you see on the left end of the navigation bar */
.logo-text {
    font-size: 44px;
    color: #0f810b;
    font-family: "Great Vibes", cursive;
}

/* To design the navigation bar but specifically targeting the navigation links (anchor tags) */
.navbar .nav-link {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.navbar .nav-link.active {
    color: #E93B81;
}


#home {
    /* The following line sets the background of the home page to a linear gradient where the first color
    in the brackets (i.e., rgba(17, 36, 90, 0.43)) is the one on the top half of the page, the 2nd one
    (i.e., rgba(17, 36, 90, 0.54)) is the color on the bottom half and they blend into each other. 0.54
    is less transparent than 0.43. The url() function points to the image you want to appear in the
    background */
    /*background: /* linear-gradient(rgba(17, 36, 90, 0.43), rgba(17, 36, 90, 0.54)), url(../img/20250821_133221.jpg);*/
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    padding-top: 150px;

}


#services {
    background: url(../img/joe-woods-4Zaq5xY5M_c-unsplash.jpg);
    background-size: cover;
}

#contact {
    background: url(../img/black2.jpg);
    background-size: cover;
}

#home h1 {
    font-weight: 300;
}

#home p {
    max-width: 550px;
    margin: 18px auto;
    font-family: "Prata", serif;

}

/* The .btn selector is made to edit the buttons on the pages of the navlinks e.g., on the home navlink
there is a home page which contains a contact button*/
.btn {
    font-weight: 700;
    font-size:12px;
    text-transform: uppercase;
    padding: 12px 28px;
    border-radius: 9999px;
}

/* The button brand is the box surrounding the button */
.btn-brand {
    background-color: #0f810b;
    color: #fff;
}

/* The hover means when a user has his/her mouse on top of the button, what color or other
specifications do you want the button brand to exhibit */
.btn-brand:hover {
    background-color: #19d812;
    color:#fff;
}

#home .btn-brand {
    background-color: #f1ddc3;
    color: #0f810b;
    
}

#home .btn-brand:hover {
    background-color: #19d812;
}

/* The following css rule means that for any element in the home section part of the class btn brand, when the cursor is hovered or when a keyboard is used/tabbed to focus on the button, it will display the following characteristics */
#home .btn-brand:hover,
#home .btn-brand:focus {
  color: #f1ddc3;
}

/* section-intro is a class that contains the services section header text "Our Services". So
any adjustments to the section-intro selector below will reflect on any object that was made using
it as a class e.g "Our Services", etc. */
.section-intro {
    text-align: center;
    margin-bottom: 60px;
}

/* hline stands for horizontal line. Its that line below the services section header "Our Services" */
.section-intro .hline {
    width: 120px;
    height: 2px;
    background-color: #0f810b;
    margin: 16px auto 0 auto;
}

.icon-box {
    width: 60px;
    height: 60px;
    background-color: #0f810b;
    color: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex: none;

}

.portfolio-item {
    overflow: hidden;
    position: relative;
}

.portfolio-item img,
.portfolio-item .portfolio-overlay {
    transition: all 1s ease;
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: #11245a6e;*/
    display: flex;
    align-items: flex-end;
    padding: 30px;
    opacity: 1;
    visibility: visible;
}

.portfolio-overlay h3,
.portfolio-overlay h6 {
    color: white;
}

/* This is what the selector, .portfolio-item:hover .portfolio-overlay means. When you hover over the portfolio item,
these are the effects that the overlay should have. Also note that portfolio is just the name of the section/navlink in a template
file that i used to learn static website creation */
.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

.portfolio-item:hover img {
    transform: scale(1.1)
}

#portfolio {
    background-color: #f1ddc3;
    position: relative;
    z-index: 1;    

}

#portfolio::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/seamless-pattern-with-leaves-gray-background_503291-555.jpg');
    /* A background size of cover sets the background image to fully cover the section and maintain the aspect ratio */ 
    background-size: 1700px 1200px;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;    
}

.feature .icon-box {
    width: 34px;
    height: 34px;
    border-radius: 100px;
    font-size: 24px;
}

form .form-control {
    border-radius: 0;
}

form .form-control:focus {
    box-shadow: none;
    border-color: #0f810b;
}

#cta {
    background-color: #0f810b;
}

.footer-top {
    padding-top: 80px;
    padding-bottom: 30px;
    background: url(../img/joe-woods-4Zaq5xY5M_c-unsplash.jpg);
    background-size: cover;
}
 
.footer-top p {
    color: #11245A;
}

.footer-bottom {
    padding-top: 30px;
    padding-bottom: 30px;
    border-top: 1px solid #0f810b;

}

.footer-bottom p {
    color: #11245A;
}

footer .footer-links a {
    display: block;
    font-weight: 400;
}

footer .footer-links a,
footer .social-icons a {
    color: #11245A;
}

footer .social-icons a:hover,
footer .footer-links a:hover {
    color:#E93B81;
}

#availability {
  position: relative;
  background-color: #f1ddc3;
  overflow: hidden;
}

#availability::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/seamless-pattern-with-leaves-gray-background_503291-555.jpg') repeat;
    /* A background size of cover sets the background image to fully cover the section and maintain the aspect ratio */ 
    background-size: cover;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;      
}


#availability > * {
  position: relative;
  z-index: 1;
}

#availability .section-intro h1 {
  margin-bottom: 0;
}

#calendar-controls button {
  min-width: 80px;
}

#calendar {
    table-layout: fixed;
    width: 100%;
}

#calendar th {
  background-color: #0f810b;
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
}

#calendar td {
  height: 80px;
  vertical-align: top;
  cursor: default;
  
}


#calendar .booked {
  color:  /*#e93b81*/#ffffff;
  text-decoration: none;
  background-color: /*rgba(233,59,129,0.1)*/#0f810b60;
}



/* add a red frown under booked dates*/ 
#calendar td.booked::after {
    content: "☹\ Booked";
    display: block;
    color: #ffffff;
    font-size: 14px;
    margin-top: 4px;
}

#videoBG {
    position: fixed;
    z-index: -1;
    transform: translateY(100px);
}

/* @media is a media query. A query is a request (for information). In this case, the user of the website, their device actually is making a query/a request to access the website and so what the @media line does is it checks whatever rule is in its smooth brackets, and if the device/media is follows that rule, it applies whatever is in the declaration. min-aspect-ratio 16/9 is for wide screens and max is for small ones */
@media (min-aspect-ratio: 16/9) {
    #videoBG {
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9) {
    #videoBG {
        width: 100%;
        height: auto;
    }
}

/*.brush-bg {
  display: inline-block;
  background: url("../img/stroke.png") no-repeat center/50% 100%;
  background-size: 120%;
  padding: 0.5em 0.2em;
  position: relative;
  z-index: 1;
}*/

.brush-bg {
  position: relative;
  display: inline-block;
  padding: 0.2em 0;
  z-index: 1;                   /* text sits on top */
}

.brush-bg::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;                  /* 40% wider than text */
  height: 120%;                 /* 20% taller */
  transform: translate(-50%, -50%);
  background: url('../img/stroke.png') no-repeat center/contain;
  background-size: 80%;
  opacity: 0.6;
  z-index: -1;                  /* behind the text */
}

#home #videoBG {
    position: absolute;      /* now lives inside #home */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;       /* like background-size: cover */
    z-index: -1; 
}

.footer-bottom {
  position: relative;
  background-color: #f1ddc3;
  overflow: hidden;
}

.footer-bottom::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/seamless-pattern-with-leaves-gray-background_503291-555.jpg') repeat;
    /* A background size of cover sets the background image to fully cover the section and maintain the aspect ratio */ 
    background-size: cover;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;      
}

#availability p {
    color: black;
}

#contact {
    /*margin: 100px;
    padding: 20px;*/
    background-image: url(../img/20250827_175624.jpg);
    background-size: cover;

}

#contact h2 {
    text-align: center;
    color: black;
    animation: puls 1.5s infinite;
}

#contact .container {
    max-width: 400px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.358);
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.207)
}

#contact label {
    display: block;
    margin-bottom: 5px;
    color: white;
}

#contact input,
#contact textarea {
    width: 90%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid white;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0);
    color: white;
}


#availability table, p {
    font-family: "Prata", serif;
}

#contact input:hover,
#contact textarea:hover {
    cursor: pointer;
}

@media (max-width: 576px) {
  table#calendar td.booked::after {
    font-size: 0.5rem;
  }
}

.email-right {
    position: absolute;
    right: 100px;
}

@media (max-width: 576px) {
  .email-right {
    position: static;
    text-align: center;
    display: block;
    
  }   
}

/*.shiny-text {
  font-size: 17px;
  font-weight: bold;
  animation: shine 3s infinite;
}

@keyframes shine {
  0%   { color: red; text-shadow: 0 0 10px red; }
  20%  { color: orange; text-shadow: 0 0 10px orange; }
  40%  { color: yellow; text-shadow: 0 0 10px yellow; }
  60%  { color: green; text-shadow: 0 0 10px green; }
  80%  { color: blue; text-shadow: 0 0 10px blue; }
  100% { color: violet; text-shadow: 0 0 10px violet; }
}
*/