@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300&display=swap');

*{
    box-sizing: border-box;
    /* overflow: hidden; */
}


:root {
    --bg-colour:rgb(43, 35, 46);
    --fg-colour: #efefef;
    --mg-colour: #1c1935;
    --accent-colour: #ee333388;
    --gradient1: #32C2C8;
    --gradient2: #22A29C;
    --gradient3: #0F8171;
    --logo-colour: #15936a;
    --gradient2transp:rgba(43, 35, 46, 0.712);
    --visited-colour:   #83BBB3;
}

body {
    margin: 0;
    font-family: 'Cairo', Helvetica, sans-serif; 
    background-color: var(--bg-colour);
    color: var(--fg-colour);
 }

 main{
   
        background-image: url(../img/coastbackground_reds.jpg);
        background-repeat: no-repeat;
        background-size: cover;
   }

 p {
    font-size: 1.5em;
}


ul {
    list-style-type: none ; 
}

ul li::before {
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: var(--gradient2);/* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
  }

 ul li {
     font-weight: 500;
     font-stretch: expanded;
     font-style: italic;
     font-size: 1.45em;
 } 

 .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    text-align: center;
 }
.logo {
    left: -999em;
    position: absolute;
    /* transition: width 2s;
    padding: .5em;
    grid-row: 4; */
}

.logo-sml {
   display: inline;
   width: 65%;
}

.logo-lrg {
   width: 35vw;
  
}


.splash {
    box-sizing: border-box;
    width: 100%;
    height: 45vh; 
    min-height: 300px;
    padding: 0px;
    display: grid;
    grid-template-rows: repeat(2,1fr); 
    align-items: center;
   
}

.info {
    padding: 2em;
}

.about {
    /* background-color: var(--bg-colour); */
    grid-row: 3;
    grid-column: 2/5;
    text-align: center;
    /* grid-column-end: auto; */
}



.bottom{
    background-color: var(--mg-colour);
    grid-row: 4;
    grid-column: span 5;
    grid-column-end: auto;
}

.bottom-wrapper {
    padding: 1.5em;
}

.headline {
    font-size: 3.5em;
    background: -webkit-linear-gradient(rgba(8, 238, 169, 0.89), rgba(6, 114, 133, 0.95), rgba(5, 97, 77, 0.95));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;   
    grid-row: 1;
    grid-column: 2/5;
    text-align: center;
    align-self: center;
    margin-bottom: .3em;
    margin-top: .75em;
  
    
    /* align-self: end; */
}

.subhead {
    grid-row: 2;
    grid-column:2/5;
    text-align: center;
    font-weight: 200;
    font-size: 2.75em;
    color: var(--mg-colour);
    margin-top: -.5em;
    /* padding: 2em; */
}

.about-wrapper{
    padding: 2em 2.5em;
}

.about-headline {
    grid-row: 3;
    grid-column: 2/5;
  
    }

.about-content {
    grid-row: 4;
    grid-column: 2/5;
    /* padding: .5em .5em; */
    }

    .about-logo {
        text-align: center;
    }

.button{
    background-color: var(--bg-colour);
    font-size: large;
    color: var(--fg-colour);
    position: relative;
    border: .015em solid white;
    padding: .5em;
    float: right;
    margin-right: 1px;
    }
 

.contact {
    grid-row: 4;
    grid-column: 1/6;
    margin: 0;
    }

.contact-headline {
    grid-row: 4;
    grid-column: 1/6;
   
}
        
.contact-wrapper {
    background-color:  rgba(14, 13, 15, 0.25);
    padding: .5em 1em 2em .5em;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}


    .contact-name, .contact-phone, .contact-email{
        font-size: large;
        color: var(--fg-colour);
        text-decoration: none;
    }
    
    .contact-email a:link {
        color: var(--fg-colour);
        text-decoration: none;
    }
    
    .contact-email  a:visited {
        color: var(--bg-colour);
        text-decoration: none;
    }
    
    .contact img{
        /* height: 12vh; */
        padding: 1em;
    }
          

.blog {
        grid-row: 5;
        /* grid-column: 2/5;   */
        /* padding: 0em 2em 0em 2em; */
}

.blogs {
        padding: 1em 2em 2.75em 1em;
        background-image: url(../img/sea_background.jpg);
        background-size: cover;
}


.blog-date {
        color: var(--gradient1);
        font-size: small ;
        font-weight: 800;
        font-style: italic;
        
    }

.blog-headline {
    font-size: 2.5em;
    color: var(--gradient2);
    margin: 0;
    }

.blog-title {
    font-size: 2em;
    margin-top: .25em;
    color: var(--gradient2);
    text-transform: uppercase;
    }



.blog-content {
        grid-row: 7;
        grid-column: 5/6;
        padding: .05em;
        font-size: 1.25em;
        }
    
       
 .blog-read-more {
        color: var(--gradient2);
        font-size: 1.25em;
        font-weight: bolder;
    }
    
   .blogs  a {
        outline: none;
        text-decoration: none;
        padding: 2px 1px 0;
    }
    
    .blogs a:link {
        color: var(--gradient2);
    
    }
    
    .blogs a:visited {
        color: var(--gradient3);
    
    }
    
    .blogs a:focus {
        border-bottom: 1px solid;
        background: var(--gradient2transp);
    }
    
    .blogs a:hover {
        border-bottom: 1px solid;     
        background: var(--fg-colour);
        color: var(--gradient3);
        padding: .25em;
        font-weight: bolder;
    }
    
    .blogs a:active {
    
    }
          
.blog1, .blog2{
    background-color: var(--gradient2transp);
    background-size: cover;
    padding: 1.5em 2.5em 1em 2.5em;
    margin-top: 1em;
}

.blog-pg-header{
    grid-column: span 2;
    text-align: center;
}

.blog-pg-header a:hover{
    background: transparent;
}

.blogs-pg-title{
    padding-left:.75em;
    font-size: 2em;
    color: var(--gradient2);
    }

.blog_signoff {
    color: var(--gradient2);
    font-style: italic;
    text-align: right;
    padding-bottom: 2em;

}

footer {
    color: var(--gradient2);
    align-self: center;
    text-align: center;
    }

.footer-headline{
    font-size: 2em;
    background: -webkit-linear-gradient(rgba(8, 238, 169, 0.89), rgba(6, 114, 133, 0.95), rgba(5, 97, 77, 0.95));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;   
    text-align: center;
    margin-bottom: .3em;
    margin-top: .75em;
}

    .copyright {
        font-size:x-small; 
        color: var(--fg-colour);
        text-align: left;
        padding:  1.75em;  
    }


@media (max-width: 450px) {
    .headline{
        font-size: 2.65em;
    }

    .subhead {
        font-size: 1.75em;
    }

    .blogs {
        padding: .75em;
    }

    .blog1, .blog2 {
        padding: 2em .75em;
    }
}

    
@media (min-width: 900px) {
   

 
 /* header {
     background-color: var(--accent-colour);
     display: flex;
 } */
 
/*  

 
 .topnav {
     overflow: hidden;
     background-color: #c7e6d65e;
     border-bottom: 1px solid #ffa50087;
     position: fixed;
     top: 0;
     width: 100%;
   }
   
   .topnav a {
     float: left;
     color: #f2f2f2;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 17px;
   }
   
   .topnav a:hover {
     background-color: #ddd;
     color: black;
   }
   
   .topnav a.active {
     background-color:var(--logo-colour);
     color: white;
   }
   
   .topnav-right {
     float: right;
   }
  */
 /* header nav {
     /* float: right; */
     
     /* padding: 0;
     justify-content: flex-end;
 }
 
 .menu li {
     display: inline;
 } */ 
 
 .logo {
     width: 10vw;
     /* height: 10em; */ 
     transition: width 2s;
     padding: .5em;
     top: 0;
     left: 0;
 }

 .logo-sml, .logo-subpgs {
     display: none;
 }
 
 .logo-lrg {
     display: inline;
     width:  25vw;
 }
 
 #logo-link {
     padding: 0px;
 }
 
 .splash {
     box-sizing: border-box;
     width: 100%;
     height: 85vh; 
     min-height: 800px;
     padding: 0px;
     justify-content: center;
     align-items: center;
     text-align: center;
    }
 
 
 .headline {
     font-size: 7em;
     background: -webkit-linear-gradient(rgba(8, 238, 169, 0.89), rgba(6, 114, 133, 0.95), rgba(5, 97, 77, 0.95));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;   
     text-align: center;
     align-self: center;
       }
 
 .subhead {
     text-align: center;
     font-weight: 350;
     font-size: 3.5em;
 }
 
 .info {
     display: grid;
     grid-template-columns: 70% 30% ;
     padding: 2em;
 }

 .about{
     display: none;
}
 
 .about-wrapper {
     padding-left: 8em;
 }
 
 .abt-headline-wrapper{
    grid-column: span 2;
 }

 .about-headline {
         font-size: 1.85em;
         margin-top: 0;
         margin-bottom: 0em;
     }

 .abt-content-wrapper{
     grid-row:4;
     padding-right: 1.5em;
 }

 .about-content {
        font-size: 1.75em;
     }
 
.contact-wrapper {
        padding: .25em;
        margin-top: 3em;
        margin-bottom: 2em;
        grid-column: 2;
        grid-row: 4;
     }

 .contact {
  
     margin:2em;
     border-radius: 0.15em;
     align-items: center;
     justify-content: center;
 }
 
 
 .bottom {
     background-color: var(--mg-colour);
     grid-row: 4;
     grid-column: span 5;
     grid-column-end: auto;
 }
 
 .bottom-wrapper {
     padding: 1.5em;
 }
 
 
 .button{
     background-color: var(--gradient1);
     font-size: large;
     color: var(--bg-colour);
     position: relative;
     border: .015em solid white;
     padding: .5em;
     float: right;
     margin-right: 1px;
     }
  
 .contact {
     text-align: center;
     align-self: center;
     /* background-image: url(../img/coastbackground.jpg); */
     background-blend-mode: screen;
 }
 
 .contact-headline {
     grid-row: 3;
     grid-column: span 2;
     color: var(--fg-colour);
     text-align: center;
     align-self: center;
 }
 
 .blogs{
     display: grid;
     grid-template-columns: 50% 50%;
     gap: 1em;
 }
 
 .blog1{
     grid-row: 2;
     grid-column: 1;
     padding: 2em;
   }
 
.blog2 {
         grid-row: 2;
         grid-column: 2;
         background-color: var(--gradient2transp);
         /* background-image: url(../img/sea_background.jpg); */
         background-size: cover;
         padding: 2em;
        
       }
   
     
.blog-wrapper {
    padding: 1em 12em;
    background-color: var(--gradient2transp);
}

.blog-date {
    color: var(--gradient1);
    font-size: small ;
    font-weight: 500;
    text-align: right;
    font-style: italic;

}

.blog-content {
    grid-row: 6;
    grid-column: 5/6;
    color: var(--fg-colour);
    /* padding: 1em; */
    }

 footer {
     grid-row: 7;
     grid-column: 1/6;
     color: var(--gradient2);
     align-self: center;
     text-align: center;
     }
    }