
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Fredoka:wght@300..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* CSS Variables*/
:root{
    /*Typography*/
    --primary-font: "Poppins", sans-serif;
    --secondary-font:"Fredoka", sans-serif;
    /* Colour scheme*/
    --primary-color:#3A3A3A; /* dark grey for text*/
    --navy-color:#34485A;  /* navy colour*/
    --nav-text-color: #FFEAA7;
    --nav-text-hover:#FEF5E7;
    --secondary-color:#6D92A5;
    --title-color: #A6DCEF;

}

body{
    font-family: var(--primary-font);
    color: var(--primary-color);
    padding-top: 88px;
}
h1, h2, h3{
    font-family: var(--secondary-font);
}
h1{
    
    color: var(--secondary-color);
}
 h2{
    
    color: var(--navy-color);
    
  }

h3{
    color: var(--secondary-color);
}


.section {
    padding-top: 5.2rem; /* To prevent the navbar overlaps the heading sections*/
}
#header.section {
    padding-top: 4rem; /*Reduce padding top from header section*/
}

#contact-us.section{
    margin-bottom: 2rem; /* Add some margin to the bottom of the contact-us section */
}

#subscribe.section{
    padding-bottom: 5.2rem;/*Add bottom padding to the successfull subscription page*/
}

#success.section{
    padding-bottom: 5.2rem;/*Add bottom padding to the successfull contact page*/
}


#navbar{
    background-color:var(--navy-color);
}

.logo{
    width: 90px;
    height:auto;
}
/* navnar hover style */
.nav-link {
    color: var(--nav-text-color) !important;
  }
  .nav-link:hover {
    color:var(--nav-text-hover) !important;
  }
  .nav-link.active {
    color:var(--nav-text-hover) !important;
    font-weight: bold;

}
/* Introduction's button styles*/
.btn-secondary {
    background-color: var(--navy-color);
    color: var(--nav-text-color);
}

.btn-secondary:hover {
    background-color: var(--nav-text-color);
    color: var(--navy-color);
}

/* Journal's button styles*/
#journal .btn-primary{
    background-color: #E89BAD;
    color:#3A3A3A;
    border: none;
    font-family: var(--secondary-font);
}
#journal .btn-primary:hover{
    -webkit-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
            transform: rotate(3deg); /* this will rotate the button once the user is hovering over the button */
    background-color:var(--secondary-color);
}

#journal .btn-primary:active{
    background-color:var(--secondary-color);
}




/* carousel styles */
#carousel{
    height: auto;
}
.carousel-item img {
   
    height: 100%;       /* make images fill that height */
    width: 100%;        /* keep width full */
    -o-object-fit: cover;
       object-fit: cover; /* makes the image fill the container*/
    
  }
/* Styling journal cards*/
  #journal .card{
      border-color:var(--secondary-color);
  }

 #journal .card-title{
      color: var(--secondary-color);
  }
 
/* Benefit section styles*/
#benefits .bg-body-tertiary{
    background-color: rgba(254, 245, 231, 0.4) !important;
    color: #34485A;
}
/* create a two column grid*/
.benefits-grid{
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
}

#benefits h3 i{
    color: #E89BAD;
    padding-right: 0.5rem;
}

/* Printables section styles */

#printables .card{
    border: 0px;
    -webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
    transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
    -o-transition: transform 0.3s ease, box-shadow 0.3s ease;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transition: transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease; /* This tells the browser to smoothly animate two properties transition and box-shadow */
}
/* Using hover to make the cards stand out individually*/
#printables .card:hover{
    -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
            transform: translateY(-5px); /* This moves the card 5px upwards making it look like if it is lifting*/
    -webkit-box-shadow: 0px 8px 16px  rgba(0, 0, 0, 0.15);
            box-shadow: 0px 8px 16px  rgba(0, 0, 0, 0.15);
}
/* Make the printable cards have same height*/
#printables img{
    height: 400px;
    width: auto;
}



/*footer styles*/

#footer{
    background-color: var(--navy-color);
}

.subscribe{
    background-color: rgba(255, 255, 255, 0.8);
}
#footer .btn-primary{
    background-color: var(--secondary-color);
    border: 0px;
}
#footer .btn-primary:hover{
    background-color: var(--nav-text-hover);
    color: var(--secondary-color);

}
#footer .btn-primary:active{
    background-color: var(--nav-text-hover);
    color: var(--secondary-color);
}
#footer input{
    background-color: var(--nav-text-hover);
    color: var(--secondary-color);
}
#footer i{
    color: var(--secondary-color);
}

#social-media p{
    color: var(--nav-text-color);
    font-weight: bold;
    font-size: large;
    
}

#social-media i{
    color: var(--nav-text-color);
    padding: 0rem 0rem 1rem 1rem;
    margin: 0.5rem 0rem 1rem 0rem;
    font-weight: bold;
    font-size: xx-large;
}
/* Styling the contact us form*/

#contact-us .btn-primary{
    background-color: var(--navy-color);
    color: var(--nav-text-color);
}

#contact-us .btn-primary:hover {
    background-color: var(--nav-text-hover);
    color: var(--navy-color);
}



#contact-us label{
    font-weight: bold;
    color: var(--secondary-color);
}
#contact-us input, #contact-us textarea{
    background-color: var(--nav-text-hover);
}




  /*Media queries*/

/*X-small devices (portrait phones, width of 375px or  less)*/
@media screen and (max-width: 375px){
    /*make carousel height fixed on a screen of a maximum width of 375px*/
    #carousel{
        height: 236px;
    }
}

/* X-small devices (portrait phones, width of 414px or  more)*/
  @media screen and (min-width: 412px){
    /*make carousel height fixed on a screen of a minimum width of 412px*/
    #carousel{
        height: 263px;
    }
}

/* small devices (portrait phones, width of 575.98px or  less)*/
  @media screen and (max-width: 575.98px){
    /* create a one column grid that will be responsive on a 576 screen or less*/
     .benefits-grid{
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
     }
     /* Clear margin in small devices*/
     #social-media {
          margin-top: 0px !important;
     }
     .subscribe{
         margin-bottom: 0px !important;
     }
    
}
  /* Medium devices (tablets, 768px and up)*/
  @media screen and (min-width: 768px){
    /*make all journal cards the same height for consistency*/
    #journal .card-text{
        min-height: 143px;
    }
    /*make carousel height fixed on a screen of a minimum width of 768px*/
    #carousel{
        height: 467px;
    }
}

/* Large devices (tablets, 1024px and up)*/
  @media screen and (min-width: 1024px){
    /*make all journal cards the same height for consistency*/
    #journal .card-text{
        min-height: 120px;
    }
    /*make carousel height fixed on a screen of a minimum width of 1024px*/
    #carousel {
        height: 596px;
    }
}
  
  /* Extra large devices (tablets, 1200px and up)*/
  @media screen and (min-width: 1200px){
    /*Make all journal cards the same height for consistency*/
    #journal .card-text{
        min-height: 192px;
    }
    /*Make carousel height fixed on a screen of a minimum width of 1200px*/
    #carousel{
        height: 366px;
    }
    /* Make the printable cards have same height in a screen of a minimum width of 1200px*/
    #printables img {
        height: 430px;
        width: 100%;
    
    }
  }
  
 

















 