html {
    font-size: min(max(1rem, 4vw), 22px);
  }

.navbar-brand {
    font-family: 'Over the Rainbow', cursive;
    font-size: 40px;
    color: black;
    font-weight: 600;
    box-sizing: content-box;
    margin-left: 5px;
    
}

.navbar-nav a {
    color: black;
    font-size: 3vh;
    font-weight: 300;
    font-family: "Karla", cursive;

}
.navbar-nav btn{
    
    text-decoration: none;
    color: white;
    padding: 15px 32px;
}

#top-button {
    background-color: #2962ff;
    color: white;
}

#top-button:hover{
    background-color: white;
    color: #2962ff;
}

/* Heading */


.background {
    background-color: #ffffff;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%232c7dfa' stroke-width='1.5' stroke-opacity='0.1'%3E%3Crect x='-40' y='40' width='75' height='75'/%3E%3Crect x='-35' y='45' width='65' height='65'/%3E%3Crect x='-30' y='50' width='55' height='55'/%3E%3Crect x='-25' y='55' width='45' height='45'/%3E%3Crect x='-20' y='60' width='35' height='35'/%3E%3Crect x='-15' y='65' width='25' height='25'/%3E%3Crect x='-10' y='70' width='15' height='15'/%3E%3Crect x='-5' y='75' width='5' height='5'/%3E%3Crect width='35' height='35'/%3E%3Crect x='5' y='5' width='25' height='25'/%3E%3Crect x='10' y='10' width='15' height='15'/%3E%3Crect x='15' y='15' width='5' height='5'/%3E%3Crect x='40' width='75' height='75'/%3E%3Crect x='45' y='5' width='65' height='65'/%3E%3Crect x='50' y='10' width='55' height='55'/%3E%3Crect x='55' y='15' width='45' height='45'/%3E%3Crect x='60' y='20' width='35' height='35'/%3E%3Crect x='65' y='25' width='25' height='25'/%3E%3Crect x='70' y='30' width='15' height='15'/%3E%3Crect x='75' y='35' width='5' height='5'/%3E%3Crect x='40' y='80' width='35' height='35'/%3E%3Crect x='45' y='85' width='25' height='25'/%3E%3Crect x='50' y='90' width='15' height='15'/%3E%3Crect x='55' y='95' width='5' height='5'/%3E%3Crect x='120' y='-40' width='75' height='75'/%3E%3Crect x='125' y='-35' width='65' height='65'/%3E%3Crect x='130' y='-30' width='55' height='55'/%3E%3Crect x='135' y='-25' width='45' height='45'/%3E%3Crect x='140' y='-20' width='35' height='35'/%3E%3Crect x='145' y='-15' width='25' height='25'/%3E%3Crect x='150' y='-10' width='15' height='15'/%3E%3Crect x='155' y='-5' width='5' height='5'/%3E%3Crect x='120' y='40' width='35' height='35'/%3E%3Crect x='125' y='45' width='25' height='25'/%3E%3Crect x='130' y='50' width='15' height='15'/%3E%3Crect x='135' y='55' width='5' height='5'/%3E%3Crect y='120' width='75' height='75'/%3E%3Crect x='5' y='125' width='65' height='65'/%3E%3Crect x='10' y='130' width='55' height='55'/%3E%3Crect x='15' y='135' width='45' height='45'/%3E%3Crect x='20' y='140' width='35' height='35'/%3E%3Crect x='25' y='145' width='25' height='25'/%3E%3Crect x='30' y='150' width='15' height='15'/%3E%3Crect x='35' y='155' width='5' height='5'/%3E%3Crect x='200' y='120' width='75' height='75'/%3E%3Crect x='40' y='200' width='75' height='75'/%3E%3Crect x='80' y='80' width='75' height='75'/%3E%3Crect x='85' y='85' width='65' height='65'/%3E%3Crect x='90' y='90' width='55' height='55'/%3E%3Crect x='95' y='95' width='45' height='45'/%3E%3Crect x='100' y='100' width='35' height='35'/%3E%3Crect x='105' y='105' width='25' height='25'/%3E%3Crect x='110' y='110' width='15' height='15'/%3E%3Crect x='115' y='115' width='5' height='5'/%3E%3Crect x='80' y='160' width='35' height='35'/%3E%3Crect x='85' y='165' width='25' height='25'/%3E%3Crect x='90' y='170' width='15' height='15'/%3E%3Crect x='95' y='175' width='5' height='5'/%3E%3Crect x='120' y='160' width='75' height='75'/%3E%3Crect x='125' y='165' width='65' height='65'/%3E%3Crect x='130' y='170' width='55' height='55'/%3E%3Crect x='135' y='175' width='45' height='45'/%3E%3Crect x='140' y='180' width='35' height='35'/%3E%3Crect x='145' y='185' width='25' height='25'/%3E%3Crect x='150' y='190' width='15' height='15'/%3E%3Crect x='155' y='195' width='5' height='5'/%3E%3Crect x='160' y='40' width='75' height='75'/%3E%3Crect x='165' y='45' width='65' height='65'/%3E%3Crect x='170' y='50' width='55' height='55'/%3E%3Crect x='175' y='55' width='45' height='45'/%3E%3Crect x='180' y='60' width='35' height='35'/%3E%3Crect x='185' y='65' width='25' height='25'/%3E%3Crect x='190' y='70' width='15' height='15'/%3E%3Crect x='195' y='75' width='5' height='5'/%3E%3Crect x='160' y='120' width='35' height='35'/%3E%3Crect x='165' y='125' width='25' height='25'/%3E%3Crect x='170' y='130' width='15' height='15'/%3E%3Crect x='175' y='135' width='5' height='5'/%3E%3Crect x='200' y='200' width='35' height='35'/%3E%3Crect x='200' width='35' height='35'/%3E%3Crect y='200' width='35' height='35'/%3E%3C/g%3E%3C/svg%3E"); 
     background-position: top;
     background-repeat:repeat;
    }
/* .topp{
    height: 56vh;
} */


/* Top Image Background */
:root {
	--background: #005;
	--primary: #88D5BF;
	--secondary: #5D6BF8;
	--third: #e27fcb;
}

* {
  box-sizing: border-box;
}


.shape {
    background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
    animation: morph 15s ease-in-out infinite;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    z-index: 5;
}


@keyframes morph {
  0% {
			border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
			background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
	} 
	
	50% {
			border-radius:  30% 60% 70% 40% / 50% 60% 30% 60%;
			background: linear-gradient(45deg, var(--third) 0%, var(--secondary) 100%);
	}
  
	100% {
		border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%;
		background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
	} 
}

/* Font Styles */
h1 {
    font-family: 'Rubik', sans-serif;
    font-size: 2rem;
}
.paragraph {
    font-family: 'Karla', sans-serif;
    font-size: 1.2rem;
}

h5 {
    font-family: 'Rubik', sans-serif;
    font-size: 1.5rem;   
}

h3{
    font-family: 'Rubik', sans-serif; 
}

h2{
    font-family: 'Rubik', sans-serif; 
    font-size: 2rem;
}

h6 {
    font-family: 'Rubik', sans-serif; 
}


p {
    font-family: 'Karla', sans-serif; 
    font-size: 1rem;
}

/* Card CSS */
.border-effect {
    
    border-width: 4px 4px 4px 0px;
    border-style: solid;
    border-image: 
      linear-gradient(
        to left, 
        blue, 
       purple
      ) 1 30%;
      border-radius: 10px;
  }

/* Box CSS */
.dark-box{
    border: 0px solid rgba(120, 144, 156,1);
    border-radius: 2vh;
    background-color: rgba(120, 144, 156,0.125);
}
.light-box{
    /* border: 3px solid linear-gradient(blue,purple); */
    border-radius: 5px;
    background-color: rgba(120, 144, 156,0.125);
}
.light-box::before{
    content: '';
  display: block;
  box-sizing: border-box;
  height: 100%;

  border: 1em solid transparent;
  border-image: linear-gradient(red 0%, blue 100%), 35;
  
}
/* .light-box h5 {
    font-size: 20pt;  
}
.light-box p {
    font-size: 12pt;  
} */

.box h5{
    font-weight: 700;
}
.gray{
    color: black;
}
.bold-text  {
    color: blue;
}

/* Fix "card" heights */
.rowy{
    overflow: hidden; 
}

[class*="coly"]{
    margin-bottom: 1rem;
    padding-bottom: -0px;
    margin-top: 50px;
    padding-top: 0px;
}

/* footer */
.footer-logo {
    font-family: 'Over the Rainbow', cursive;
    font-size: 2rem;
    color: black;
    font-weight: 600;
    box-sizing: content-box; 
}
.footer-logo:hover {
    color: blue;
}
/* Call to Action */
.custom-shape-divider-top-1616595826 {
   position:relative;
   
    left:0;
    right:0;
}
/* Footer */
.footer a{
    text-decoration: none;
} 
.footer a:hover {
    text-decoration: underline;   
}

/*-----------responsive--------*/
@media only screen and (min-width: 1030px) {
    .topp {
        min-height: 25rem!important;
    }
    .top-holder h1{  
        font-size: 2rem;
    }
}
@media only screen and (max-width: 1030px) {
    .navbar-brand {
        font-family: 'Over the Rainbow', cursive;
        font-size: 3rem;
        color: black;
        font-weight: 600;
        box-sizing: content-box;
        padding-right: 1rem!important;
        padding-left: 1rem!important;
        
    }
    
    .navbar-nav a {
        color: black;
        font-size: 2rem;
        font-weight: 300;
        font-family: "Karla", cursive;
    
    }

    .topp {
        min-height: 30vh;
    }
    .top-holder h1{  
        font-size: 3rem;
    }
    .top-holder p {
        font-size: 1.5rem;
    }
    h1 {
        font-family: 'Rubik', sans-serif;
        font-size: 3rem;
    }
    
    .manage h2 {
        font-family: 'Rubik', sans-serif;
        font-size: 2.5rem;
    }

    .paragraph {
        font-family: 'Karla', sans-serif;
        font-size: 1.5rem;
    }
    
    h5 {
        font-family: 'Rubik', sans-serif;
        font-size: 2.5rem;   
    }
    
    h3{
        font-family: 'Rubik', sans-serif; 
    }
    
    h2{
        font-family: 'Rubik', sans-serif; 
        font-size: 2rem;
    }
    
    h6 {
        font-family: 'Rubik', sans-serif; 
    }
    
    
    p {
        font-family: 'Karla', sans-serif; 
        font-size: 1.5rem;
    }

    .light-box{
        border: 1px solid rgb(214, 214, 255);
        border-radius: 2vh;
        background: inherit;
        background-color: white;
    }
    
    
}
@media only screen and (max-width: 600px) {
    .topp {
        min-height: 600px;
    }  
    .top-holder h1 {
        font-size: 50vh;
    }
}