/*====================================================
                DEFAULT VALUES:

                Font Family                 : Roboto Condensed
                
                Greenish Blue               : #34c6d3       (Buttons, Icons, Links, Lines & Backgrounds)
                Steel Gray                  : #41464b       (Headings)
                Blue Bayoux                 : #64707b       (Paragraphs)
                White                       : #fff          (Text With Black Backgrounds)
                Black                       : #000 
                Mustard                     : #fcba03, #ffc800       (Menu bar)

                New green/blue              : rgb(20,133,209) #00999c, #3399cc #333366 #666699 #05abbe #0599be #7d7df0 
                Purple                      : 69548f  rgb(110,40,160)
                  

======================================================*/


:root{    
    --pri-color:#0599be;
    --sec-color: #483d8b;
    --acc-color: #FF8C00;
    --brightlink-color: aqua;
    --pri-background:	#3FB4DA;    
    --sec-background:rgba(255,255,255,0.75);  
    --light-background: rgba(20,133,209,0.3);
    --head-font: 'Rajdhani';
    --other-font: 'Hind';
}

/* General CSS */

html, body {        
    font-family: var(--other-font), sans-serif;
    font-size: 2.4vmin;     
    font-weight: 500;
    color: #fff;
}

.parallax {
    height: auto;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;    
    background-image: url("../img/banner2.jpg");
    background-blend-mode: multiply;
}
.btn {
    background-color: #fff;
    color: var(--sec-color);
    font-size: 1rem;    
    font-weight: 600;    
}

li a:hover, li a:active, .btn:hover{        
    border-bottom: 2px solid var(--acc-color);    
    font-weight: 700;    
}

i,#msgalert {color: var(--acc-color);}

h1{
    font-family: var(--head-font), sans-serif;
    font-size: 1.5rem;
    color:var(--sec-color);
    font-weight: 700;
    line-height: 2;        
}

h2{
    font-family: var(--head-font), sans-serif;
    font-size:1.3rem;    
    font-weight: 700;
    line-height: 2;    
}

h5{
    color: var(--brightlink-color);
}
/* -------------- */
/* ----Home------ */
/* -------------- */

#home {
    height: 90vh;    
    margin-top: 10vh;
    background-image: linear-gradient(to bottom,white,var(--sec-color));    
    text-align: center;
    align-items: center;
    align-self: center;
    align-content: center;
    display: flex;
    flex-direction: column;
}

.cimg{
    width: 90vw;
    height: 62vh;
    background-size: contain;
}

.cimg1 {        
    -webkit-filter: grayscale(80%);
    filter: grayscale(80%);    
}

.cimg2, .cimg3{
    -webkit-filter: grayscale(30%)  contrast(70%);
    filter: grayscale(30%) contrast(70%);   
}

.carousel-caption {    
    bottom: auto;
    padding: 0.4vw;
    top: 30%;
    color:black;
    font-style: italic;
    background: var(--sec-background); 
   
}

/* -------------- */
/* ---Services----- */
/* -------------- */

#services {        
    background-image: linear-gradient(to top,var(--sec-color),var(--light-background),var(--sec-color));    
    background-blend-mode: multiply;
    display: grid;  
    height: fit-content;
    padding-top: 10vh;
}

.card-body p{
    color: var(--sec-color);    
}

.card-body h2{
    color: #fff;
}

#services h1{
    color: #fff;    
}

#services .card{    
    background-image: linear-gradient(to bottom,#fff,var(--light-background),var(--pri-color));        
    margin: 1rem;
}


.card-footer{
    margin:auto;    
}

.simg {
    height: 60%;
    width: 85%;
}

/* -------------- */
/* ---About Us----- */
/* -------------- */
#aboutus {        
    display: grid;
    height: 100vh;
    padding-top: 10vh;
    align-self: center;
    align-content: center;
    justify-self: center;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to top,var(--pri-color),var(--light-background),var(--sec-color));          
    background-blend-mode:multiply;              
}

#aboutusdiv{
    display: grid;
    background-image: linear-gradient(to top,var(--sec-color),var(--pri-background),var(--sec-color));        
    width:75vw;
    padding:5vw;
    padding-top: 0; 
    font-size: 1.1rem;
}

#aboutus h1{
    color: #fff;    
}

/* -------------- */
/* ---Contact----- */
/* -------------- */

#contact {        
    display: grid;
    height: 90vh;  
    background-image: linear-gradient(to bottom, var(--pri-color),var(--sec-color));        
    background-blend-mode: darken;
}

.contcont{
    height: 40vh;
}

#contact h1, #contact h2{
    color:#fff;
}

#contact a {
    color: var(--brightlink-color);
}

@media only screen and (max-width: 600px)  {
.parallax {
    background-attachment: scroll;
  }

.cimg{
    width: 90vw;
    width: 100%;
    height: 45vh;
    background-size: contain;
}

}