html{
    scroll-behavior: smooth;
   
}

body{
    height: 100vh;
    flex-direction: column;
    display: flex;
    
}

body{
    background-color: #f5f1ed;
}

a{outline:none;}

footer{
    background-color: #89c8ec;
    
}
h1, legend{
    font-family: "Ropa Sans", sans-serif;
    font-size: 3rem;
    text-shadow: 3px 6px 5px rgba(17, 57, 117, 0.158)
}

h3{
    font-family: "Poppins", sans-serif;
    color: #727272;
    
}

h5{
    font-family: "Open Sans", sans-serif;
}

h6{
    font-family: "Open Sans", sans-serif;
    color:rgb(65, 62, 68);
    font-size: 1.3rem;
    font-weight: 600;
}

p{
    color:#5c5d5e;
    font-weight: 400;
    font-size: 1.1rem;
}

span{
    transform: scale(.95);
    transition: 100ms ease-in-out;
}

.alt-card{
    background: #ececec;
    box-shadow: 0px 7px 7px rgb(221, 221, 221);
    border: 2px solid #e6e6e6;
    
}

.blank-space{
    min-height: 10vh;
   }

.bottom{
    align-self: flex-end;
}

.btn-primary{
    background-color: #0a31b1;
}

.card{
    /* background:  #89c8ec;
     */
    border:none;
    background: none;
    
}

.card-body{
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    
}


.card-left{
    border-radius: 0% 30% 0% 40% / 20% 30% 20% 40%  ;
   /*  box-shadow: 5px 5px 4px rgb(212, 210, 210); */
    
}

.card-link{
    color: #000000;
    height: 100%;

    
}

.card-link:hover .card-inner, .card-link:focus .card-inner{
    background: #cfe9f7;
    color: #000000;
    transition: .3s;
    /* transform: scale(1.01); */
    transform: translate(0px, 2px);

}

.card-right{
    border-radius: 30% 0% 40% 0% / 30% 20% 30% 20%  ;
    box-shadow: -5px 5px 4px rgb(212, 210, 210);
}

.card-img-top{
    width: 100%;
    height: 15em;
    object-fit: scale-down;
}

.card-inner{
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card-title {
    font-family: "Open Sans", sans-serif;
}

.center-bottom{
    vertical-align: bottom;
}

.client-link:focus-visible{
    border: 2px solid rgb(17, 140, 255);
}

.client-logo{
    max-height: 100px;    
    transition: 200ms ease-in-out;
}

.client-logo:hover{
    transform: scale(1.1);
}

.client-container{
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr) ) ;
}

.cloud{
    width: 50%;
    height: auto;
}
.cloud-grid {
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    grid-template-rows: auto, auto ;
}



.footer-container{
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fill, minmax(333px, 1fr) ) ;
   
}

.footer-link{
    font-family: "Open Sans", sans-serif;

    color: #000000;
    transition: all 50ms ease-in-out;
}

.footer-link:hover{
    color: #3b6274;
    text-decoration: underline 2px;
}

.footer-logo-link:hover .logo{
    transform: scale(1.2);
    
}

.form-control{
	border-radius: 5px;
    box-shadow: 5px 5px 4px rgb(212, 210, 210);
}

.header-row{
    display: grid;
    grid-template-columns: 15% 40% 45%;
    grid-template-rows: auto, auto ;
}
.hero-button {
	background-color:#cf3e4a;
    transition: 300ms;
	border-radius:16px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	justify-content: flex-end;
	font-weight:bold;
	padding:.5em 1.2em;
    text-decoration:none;
    /* white-space: nowrap; */
    border: solid 4px #cf3e4a;
    box-shadow: 4px 4px 3px rgb(201, 201, 201);
    margin-top: auto;
}
.hero-button:hover {
    background-color:#97363f;
    border: solid 4px #97363f;
    color:#ffffff;
    text-decoration: none;
    box-shadow: 2px 2px 3px rgb(201, 201, 201);
    transition: .3s;
}
.hero-button:active {
	position:relative;
    top:1px;
    box-shadow: 3px 3px 3px rgb(201, 201, 201);
}
.hero-button:focus{
    background-color:#b32836;
    border: solid 4px #f18a94;
    box-shadow: 2px 2px 3px rgb(201, 201, 201);
}

.hero-container{
    min-height: 60rem;
    background: linear-gradient(145deg, #f8fa6a, #89c8ec, #70bfec, #3896cc,#73f5e4);
    background-size: 400% 400%;
    box-shadow: 0px 7px 7px rgb(211, 211, 211);
    -webkit-animation: gradientBG 10s ease infinite;
         animation: gradientBG 10s ease infinite;
}

.hero-img{
    -webkit-animation: mover 2s infinite  alternate;
    animation: mover 2s infinite  alternate;
    
}

.hero-text{
    /* text-shadow: 3px 4px 3px rgb(221, 221, 221);
    letter-spacing: .5px; */
    max-lines: 3;
}
.hero-text-container{
    
    min-height: 20vh;
    background-color: #eff0f0;
    display: grid;
    grid-template-columns: 15% 32% 13% 40%;
    grid-template-rows: auto, auto ;
    
    
    align-items: center;
    box-shadow: 0px 7px 7px inset rgb(219, 219, 219);
}



.main-container{
    background-image: #fdf9f4;
    /* box-shadow: -5px 5px 4px rgb(212, 210, 210); */
}


.navbar-brand{
    
    transition: all .2s ease-in-out;
    font-family: "Righteous", sans-serif;
}
.navbar-brand:hover, .navbar-brand:focus{
    color: rgb(66, 66, 66) !important;
    text-decoration: underline 4px rgb(66, 66, 66);
}

.navbar-brand:hover .logo {
    transition: all .7s ease-in-out;
    transform: scale(1.1) rotate(360deg);
} 

 .navbar-brand:focus .logo {
transition: all .1s;
transform: scale(1.1) rotate(360deg);
}




.nav-link{
    color: #000000 !important;
    transition: all 200ms ease-in-out;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    font-size: 1.3rem;
    
}
.nav-link:hover, .nav-link:focus{
    text-decoration: underline 4px rgb(66, 66, 66);
    color: #333333 !important;
    transition: 300ms;
    font-size: 1.4rem;
}

.pad-row{
    min-height:30vh;
    
}

.pad-row-small{
    min-height: 3vh;
}

/* .service-box{
    background-color: #faf7f4;
    box-shadow: -5px 5px 4px rgb(212, 210, 210);
} */

.profile-img{
    border-radius: 20rem;
    box-shadow: 0px 7px 7px rgb(202, 202, 202);
    transition: all 100ms ease-in-out;
    border: 1px solid #d8d8d8;
}

.quote{
    font-size: 1.2rem;
    text-shadow: 3px 7px 5px rgba(109, 109, 109, 0.11)
    
}

.quotations{
    font-size: 1.6rem;
}

.review-container{
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fill, minmax(333px, 1fr) ) ;
    
}

.review-card{
    background-color: #f1f1eb;
    transition: 300ms ease-in-out;
    border: 3px solid #ecedee;
}

.review-card:hover{
    transform: translateY(-8px);
    
}

.review-card:hover .profile-img{
    box-shadow: 0px 3px 3px rgb(161, 161, 161);
    transform: translateY(4px) scale(0.9);
    filter: grayscale(50);
    
}

.review-card:hover span{
    transform: scale(1);
}

.second-container{
    background-color: #89c8ec;
    box-shadow: 0px 7px 7px rgb(211, 211, 211);
}

.send-button {
	background-color: rgb(60, 121, 90);
	border-radius:25px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:18px;
	font-weight:bold;
	padding:10px 50px;
    text-decoration:none;
    white-space: nowrap;
    border: solid 4px rgb(60, 121, 90);
    box-shadow: 4px 4px 3px rgb(201, 201, 201);
}

.send-button:hover{
    background-color: rgb(45, 90, 68);
    border: solid 4px rgb(45, 90, 68);
    color:#ffffff;
}

.service-card-container{
    
   
    background-color: #eff0f0;
    
    
    
    align-items: center;
    box-shadow: 0px 7px 7px inset rgb(221, 221, 221);
}

.text-row{

    background-color: #E7E8E8;
}

.top-section{
    background-color: #89c8ec;
}

@media only screen and (min-width: 768px) {
    .pad-row{
        min-height:20rem;
    }
    .negative-margin{
        margin-top: -25vh;
    }

    .client-container{
        display: grid;
        gap: 1em;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
    }

    .card-margin-left, .hero-img-top, .left-card{
        margin-left: 0% ;
        visibility: collapse;
        display: none; 
        height: 0 ;
        width: 0 ;
        
    }
} 

@media only screen and (max-width: 767.9px) {
    .pad-row{
        min-height:7vh;
    }
    .negative-margin{
        margin-top: -70vh;
    }
    
    .card-margin-right, .hero-img-bottom {
        margin-right: 0%;
        visibility: collapse;
        display: none; 

        height: 0;
    }
    .header-row{
        display: grid;
        grid-template-columns: 5% 90% 5%;
        grid-template-rows: auto, auto ;
    }
    .hero-img-top{
        visibility: visible;
        
    }
    
    .hero-text-container{
    
        
        grid-template-columns: 15% 70% 15% ;
        
    }

    .service-box{
        text-align: center;
    }

}

@-webkit-keyframes gradientBG {
    0% {
    background-position: 0% 50%;
    }
    50% {
    background-position: 100% 50%;
    }
    100% {
    background-position: 0% 50%;
    }
   }
@keyframes gradientBG {
    0% {
    background-position: 0% 50%;
    }
    50% {
    background-position: 100% 50%;
    }
    100% {
    background-position: 0% 50%;
    }
}

@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}