@import url('https://fonts.googleapis.com/css?family=Playfair+Display') ;
@import url('https://fonts.googleapis.com/css?family=Playfair+Display|Source+Sans+Pro') ;
body, h1, h2, h3, h4, h5, h6 {
font-family : "Raleway", sans-serif;
}
body, html {
height : 100%;
line-height : 1.8;
}
.bgimg-1 {
background-position : center;
background-size : cover;
background-image : url("background.png");
min-height : 100%;
}
.w3-bar .w3-button {
padding : 16px;
}
a.w3-bar-item.w3-button {
font-family : cursive;
}
.fader {
font-size : xx-large;
text-align : center !important ;
font-style : oblique;
font-family : cursive;
font-weight : 600;
color : #0086c4 !important ;
text-decoration-line : underline;
}
.border-design {
border-style : inset;
border-radius : 20px;
margin : 30px;
height : max-content;
}
.border-design:hover {
box-shadow : 0 6px 10px rgb(0, 0, 0, 0.4);
transform : scale(1.01);
}
.wrapper {
width : 100vw;
height : fit-content;
display : flex;
justify-content : center;
align-items : center;
}
.wrapper .container {
width : 90%;
height : auto;
justify-content : center;
align-items : center;
flex-wrap : nowrap;
}
.wrapper .container .card img {
width : 200px;
}
.wrapper .container .card {
width : 31%;
background-color : #ccc;
padding : 20px;
border-radius : 0 0 5px 5px;
padding-bottom : 45px;
text-align : center;
margin : 0 15px;
}
.wrapper .container .card p {
color : #fff;
margin-bottom : 10px;
}
.border-top-yellow {
border-top : 4px solid #FCAF4A;
color : #FCAF4A;
}
.border-top-green {
border-top : 4px solid #24EE92;
color : #24EE92;
}
.border-top-blue {
border-top : 4px solid #549EF2;
color : #549EF2;
}
.wrapper .container .card .explore-btn {
text-align : center;
}
.wrapper .container .card .explore-btn a {
padding : 12px 45px;
text-align : center;
background-color : #f1f1f1;
color : #0086c4;
font-weight : bolder;
border-radius : 4px;
text-decoration : none;
}
.wrapper .container .card .explore-btn a:hover i {
margin-left : 5px;
transition : all 0.18s ease;
}
@media (max-width: 768px) {
.wrapper {
height : auto;
}
.wrapper .container {
flex-direction : column;
height : auto;
}
.wrapper .container .card {
width : 100%;
margin : 25px 0;
}
.wrapper .container .card:last-child {
margin-bottom : 25px;
}
}
h1.fader {
padding : 50px;
padding-top : 70px;
}
a.w3-bar-item.w3-button {
font-family : cursive;
}
.w3-bar .w3-button {
font-weight : 600;
padding : 10px 15px;
padding-left : 1px;
color : #222;
font-family : "Exo", sans-serif;
text-transform : capitalize;
font-size : 16px;
transition : all 0.25s ease;
}
.header-top-bar {
background : #0086c4;
font-size : 14px;
padding : 10px 0;
box-shadow : 0 1px 2px rgb(0, 0, 0, 0.05);
color : #fff;
}
.border-top-blue {
color : #0086c4;
}
@media (max-width: 768px) {
.header-top-bar {
height : 100px !important ;
}
.mob-left {
text-align : left !important ;
padding-left : 4px;
}
body {
height : 30%;
}
}
p {
font-family : cursive;
}
div#myNavbar {
border-bottom : 2px solid #0086c4;
}
.wrapper .container .card {
background-color : #ccc6;
}
.w3-col {
margin-bottom : 40px !important ;
}
.image {
border-radius : 50%;
border : #96989c solid 5px;
}
.image:hover {
box-shadow : 0 0 8px 8px #0086c4;
}
.w3-container {
text-align : center;
}
.pcard {
padding-left : 10px;
padding-right : 10px;
background-color : rgb(250, 247, 247, 0);
transition : 0.1s;
}


/* Importing Google font - Open Sans */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

.footer {

    top: 50%;
    left: 50%;


    width: 100%;
    background: #0086c4;

}

.footer .footer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3.5rem;
    padding: 60px;
}

.footer-row .footer-col h4 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 400;
    font-family: cursive;
}

.footer-col .links {
    margin-top: 20px;
}

.footer-col .links li {
    list-style: none;
    margin-bottom: 10px;
}

.footer-col .links li a {
    text-decoration: none;
    color: #bfbfbf;
    font-family: cursive;
}

.footer-col .links li a:hover {
    color: #fff;
}

.footer-col p {
    margin: 20px 0;
    color: #bfbfbf;
    max-width: 300px;
}

.footer-col form {
    display: flex;
    gap: 5px;
}

.footer-col input {
    height: 40px;
    border-radius: 6px;
    background: none;
    width: 100%;
    outline: none;
    border: 1px solid #7489C6;
    caret-color: #fff;
    color: #fff;
    padding-left: 10px;
}

.footer-col input::placeholder {
    color: #ccc;
}

.footer-col form button {
    background: #fff;
    outline: none;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: 0.2s ease;
}

.footer-col form button:hover {
    background: #cecccc;
}

.footer-col .icons {
    display: flex;
    margin-top: 30px;
    gap: 30px;
    cursor: pointer;
}

.footer-col .icons i {
    color: #afb6c7;
}

.footer-col .icons i:hover {
    color: #fff;
}

@media (max-width: 768px) {
    .footer {
        position: relative;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        border-radius: 0;
    }

    .footer .footer-row {
        padding: 20px;
        gap: 1rem;
    }

    .footer-col form {
        display: block;
    }

    .footer-col form :where(input, button) {
        width: 100%;
    }

    .footer-col form button {
        margin: 10px 0 0 0;
    }
}



.title{
	font-weight: 100;
	font-size: medium;
	max-width: 1000px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: cursive;	
	
	
}


@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display|Source+Sans+Pro');



card-size: 400px;
image-size: 100%;
image-height: 250px;


.card {
  width: 400px;
  margin:0px auto;
  
  background-color:white;
  box-shadow: 0px 5px 20px #555;
 
  a {
   color: #333;
	 text-decoration:none;
  }
  
  &:hover {  
    .card-image {
      img {
         width: $image-size+10%;
         filter:grayscale(0);
      }  
    }
  }
  
}

.card-image {

  height: 350px;
  
  position:relative;
  overflow:hidden;
  
  img {
    width: $image-size;
    
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    
    
    transition-property: filter width;
    transition-duration: .3s; 
  }
 
}

.card-body {
  text-align:center; 
  padding: 15px 20px; 
  box-sizing: border-box;
}

.card-date {
  font-family: 'Source Sans Pro', sans-serif;
}

.card-title, .card-exceprt {
   font-family: 'Playfair Display', serif;
}

.card-date, .card-title {
  text-align:center;
  text-transform:uppercase;
  font-weight: bold;
}

.card-date, .card-excerpt {
  color: #777;
}


 p{
  font-family: cursive;
  }
   div#myNavbar{
  border-bottom: 2px solid #0086c4;
  }
  
  
  .card {
    width: 75%;
    margin-inline: auto;
}

.card-image{
    border-radius: 20px;
}


h3.w3-center.fader.w3-light-grey{

    color:#0086c4!important;
}