@charset "utf-8";

html {
	box-sizing: border-box;

}

*,
*::before,
*::after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}

body {
	font-family: "Arial", "Helvetica", 'Helvetica Neue', "sans-serif";
	font-weight: 400;
	margin: 0;
	padding: 0;
	font-size: 1.2rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header .NavSpace { /* to give space for top navbar*/
        width: 100%;
        background: #989FAC;
        min-height: 75px;
    }

	

		










/*EXTRA LARGE MONITOR - START*/

@media screen and (min-width: 2100px){
	.HeroServices {/*Hero Image and area*/
        display: flex;
        margin: 75px auto 0;
        width: 100%;
        min-height: 700px;
        background-image: url("images/Services/GavelTechHero2400x933.jpg"); /*first rgba values give dark effect to image*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: contain;
        align-content: center;
        align-items: center;
        z-index: -1;
    }
	.Card-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 50%;
		height: auto;
		margin: 40px auto 0;
		}

	.Card   {
		width: 100%;
		height: auto;
		display: inline-flex;
		flex-direction: row;
		background-color: #EFEFEF;
		border: 2px solid white;
		margin-bottom:15px;
		border-radius: 10px ;
		transition: transform 0.6xs ease;
		box-shadow: 5px 5px 10px gray;
		overflow: hidden;
	}
	.Card:hover {
		transform: translateY(-10px);
		background-color: 2px solid #C8C7CB;
		border: 2px solid white;
		box-shadow: 5px 5px 10px gray;
	}


	.Card-content {
		display: flex;
		flex-direction: column;
		flex: 0 1 70%;
		border-left: 2px solid #DEDEE0;
		margin: 25px;
	}
	.linktext {
		text-decoration: none;
	}
	.linktext h3 {
		color:#014F77;
		font-weight: 600;
		font-size: 2rem;
		padding: 0 20px 0;
		height: auto;
		width: 80%;	
		text-decoration: none;
	}
	.linktext p {
		padding: 15px 20px;
		height: auto;
		width: 100%;
		font-size: 1.25em;
		color: black;
		text-decoration: none;
	}
	.CardImg {
		display: block;
		flex: 1 1 40%;

	}
	.ThumbImg {
		height: 100%;
		width: 100%;
		object-fit: cover;
		border-radius: 8px 8px 0 0;
		z-index: 1;
	}
	.Card-container2 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 50%;
		height: auto;
		margin: 0 auto 40px;

		}
	.Card2 {
		width: 32%;
		background-color: #EFEFEF;
		border: 2px solid white;
		margin: 15px auto;
		border-radius: 10px ;
		transition: transform 0.6xs ease;
		box-shadow: 5px 5px 10px gray;
	}
	.Card2:hover {
		transform: translateY(-10px);
		background-color: 2px solid #C8C7CB;
		border: 2px solid white;
		box-shadow: 5px 5px 10px gray;
	}
	.ThumbImg2 {
		height: 100%;
		width: 100%;

		object-fit: cover;
	}
	.Card-content2 {
		display: flex;
		flex-direction: column;
		flex: 0 1 70%;
		border-top: 2px solid #DEDEE0;
		margin: 10px;
	} 
	.Card-content2 h4 {
		color:#014F77;
		font-weight: 600;
		font-size: 1.25em;
		padding: 5px 10px;
		height: auto;
		width: 100%;
	}
	.Card-content2  p {
		padding: 5px 10px;
		height: auto;
		width: 100%;
		color: black;
	}
	.Card3 {
		width: 100%;
		background-color: #EFEFEF;
		border: 2px solid white;
		margin: 15px auto;
		border-radius: 10px ;
		transition: transform 0.6xs ease;
		box-shadow: 5px 5px 10px gray;	
		padding-left: 10px;
		padding-bottom: 10px;
	}
	.Card3 p {
		width: 100%;
	}
	.Card3:hover {
		transform: translateY(-10px);
		background-color: 2px solid #C8C7CB;
		border: 2px solid white;
		box-shadow: 5px 5px 10px gray;
	}
	.Card-container3 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 50%;
		height: auto;
		margin: 0 auto 40px;
		border-top: 2px solid #EFEFEF;
		padding: 40px 0 40px;
	}
}
/*EXTRA LARGE MONITOR - END */


















/*LARGE MONITOR SIZE - START*/
@media screen and (min-width: 1622px) and (max-width: 2099px){
	.HeroServices {/*Hero Image and area*/
        display: flex;
        margin: 75px auto 0;
        width: 100%;
        min-height: 700px;
        background-image:  url("images/Services/GavelTechHero2400x933.jpg"); /*first rgba values give dark effect to image*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: contain;
        align-content: center;
        align-items: center;
        z-index: -1;
    }
	.Card-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 70%;
		height: auto;
		margin: 40px auto 0;
		}

	.Card   {
		width: 100%;
		height: auto;
		display: inline-flex;
		flex-direction: row;
		background-color: #EFEFEF;
		border: 2px solid white;
		margin-bottom:15px;
		border-radius: 10px ;
		transition: transform 0.6xs ease;
		box-shadow: 5px 5px 10px gray;
		overflow: hidden;
	}
	.Card:hover {
		transform: translateY(-10px);
		background-color: 2px solid #C8C7CB;
		border: 2px solid white;
		box-shadow: 5px 5px 10px gray;
	}
	.Card-content {
		display: flex;
		flex-direction: column;
		flex: 0 1 70%;
		border-left: 2px solid #DEDEE0;
		margin: 25px;
	}
	.linktext {
		text-decoration: none;

	}
	.linktext h3 {
		color:#014F77;
		font-weight: 600;
		font-size: 2rem;
		padding: 0 20px 0;
		height: auto;
		width: 80%;	
		text-decoration: none;
	}
	.linktext p {
		padding: 15px 20px;
		height: auto;
		width: 100%;
		font-size: 1.25em;
		color: black;
		text-decoration: none;
	}
	.CardImg {
		display: block;
		flex: 1 1 40%;

	}
	.ThumbImg {
		height: 100%;
		width: 100%;
		object-fit: cover;
		border-radius: 8px 8px 0 0 ;
	}
	.Card-container2 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 70%;
		height: auto;
		margin: 0 auto 40px;

		}
	.Card2 {
		width: 32%;
		background-color: #EFEFEF;
		border: 2px solid white;
		margin: 15px auto;
		border-radius: 10px ;
		transition: transform 0.6xs ease;
		box-shadow: 5px 5px 10px gray;
	}
	.Card2:hover {
		transform: translateY(-10px);
		background-color: 2px solid #C8C7CB;
		border: 2px solid white;
		box-shadow: 5px 5px 10px gray;
	}
	.ThumbImg2 {
		height: 100%;
		width: 100%;

		object-fit: cover;
	}
	.Card-content2 {
		display: flex;
		flex-direction: column;
		flex: 0 1 70%;
		border-top: 2px solid #DEDEE0;
		margin: 10px;
	} 
	.Card-content2 h4 {
		color:#014F77;
		font-weight: 600;
		font-size: 1.25em;
		padding: 5px 10px;
		height: auto;
		width: 100%;
	}
	.Card-content2  p {
		padding: 5px 10px;
		height: auto;
		width: 100%;
		color: black;
	}
	.Card3 {
		width: 100%;
		background-color: #EFEFEF;
		border: 2px solid white;
		margin: 15px auto;
		border-radius: 10px ;
		transition: transform 0.6xs ease;
		box-shadow: 5px 5px 10px gray;	
		padding-left: 10px;
		padding-bottom: 10px;
	}
	.Card3 p {
		width: 100%;
	}
	.Card3:hover {
		transform: translateY(-10px);
		background-color: 2px solid #C8C7CB;
		border: 2px solid white;
		box-shadow: 5px 5px 10px gray;
	}
	.Card-container3 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 70%;
		height: auto;
		margin: 0 auto 40px;
		border-top: 2px solid #EFEFEF;
		padding: 40px 0 40px;
	}
	.Card-content3 {
		border-left: 2px solid #EFEFEF;
	}
	.Card-content3 p {
		padding: 5px 10px 5px 0;
		height: auto;
		width: 100%;
		color: black;
	}
}
/*LARGE MONITOR SIZE - END*/














/*MONITOR SIZE - START*/
@media screen and (min-width: 1281px) and (max-width: 1621px) {
	.HeroServices {/*Hero Image and area*/
        display: flex;
        margin: 75px auto 0;
        width: 100%;
        min-height: 550px;
        background-image: url("images/Services/GavelTechHero1200x467.jpg"); /*first rgba values give dark effect to image*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: contain;
        align-content: center;
        align-items: center;
        z-index: -1;
    }
	.Card-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 70%;
		height: auto;
		margin: 40px auto 0;
		}

	.Card   {
		width: 100%;
		height: auto;
		display: inline-flex;
		flex-direction: row;
		background-color: #EFEFEF;
		border: 2px solid white;
		margin-bottom:15px;
		border-radius: 10px ;
		transition: transform 0.6xs ease;
		box-shadow: 5px 5px 10px gray;
		overflow: hidden;
	}
	.Card:hover {
		transform: translateY(-10px);
		background-color: 2px solid #C8C7CB;
		border: 2px solid white;
		box-shadow: 5px 5px 10px gray;
	}
	.Card-content {
		display: flex;
		flex-direction: column;
		flex: 0 1 70%;
		border-left: 2px solid #DEDEE0;
		margin: 25px;
	}
	.linktext {
		text-decoration: none;

	}
	
	.linktext h3 {
		color:#014F77;
		font-weight: 600;
		font-size: 2rem;
		padding: 0 20px 0;
		height: auto;
		width: 80%;	
		text-decoration: none;
	}
	.linktext p {
		padding: 15px 20px;
		height: auto;
		width: 100%;
		font-size: 1.25em;
		color: black;
		text-decoration: none;
	}
	.CardImg {
		display: block;
		flex: 1 1 40%;

	}
	.ThumbImg {
		height: 100%;
		width: 100%;
		border-radius: 8px 8px 0 0 ;
		object-fit: cover;
	}
	.Card-container2 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 70%;
		height: auto;
		margin: 0 auto 40px;

		}
	.Card2 {
		width: 32%;
		background-color: #EFEFEF;
		border: 2px solid white;
		margin: 15px auto;
		border-radius: 10px ;
		transition: transform 0.6xs ease;
		box-shadow: 5px 5px 10px gray;
	}
	.Card2:hover {
		transform: translateY(-10px);
		background-color: 2px solid #C8C7CB;
		border: 2px solid white;
		box-shadow: 5px 5px 10px gray;
	}
	.ThumbImg2 {
		height: 100%;
		width: 100%;

		object-fit: fit;
	}
	.Card-content2 {
		display: flex;
		flex-direction: column;
		flex: 0 1 70%;
		border-top: 2px solid #DEDEE0;
		margin: 10px;
	} 
	.Card-content2 h4 {
		color:#014F77;
		font-weight: 600;
		font-size: 1.25em;
		padding: 5px 10px;
		height: auto;
		width: 100%;
	}
	.Card-content2  p {
		padding: 5px 10px;
		height: auto;
		width: 100%;
		color: black;
	}
	.Card3 {
		width: 100%;
		background-color: #EFEFEF;
		border: 2px solid white;
		margin: 15px auto;
		border-radius: 10px ;
		transition: transform 0.6xs ease;
		box-shadow: 5px 5px 10px gray;	
		padding-left: 10px;
		padding-bottom: 10px;
	}
	.Card3 p {
		width: 100%;
	}
	.Card3:hover {
		transform: translateY(-10px);
		background-color: 2px solid #C8C7CB;
		border: 2px solid white;
		box-shadow: 5px 5px 10px gray;
	}
	.Card-container3 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 70%;
		height: auto;
		margin: 40px auto 0;
		border-top: 2px solid #EFEFEF;
		padding: 40px 0 40px;
	}

	#Concierge p {
		padding: 5px 10px;
		height: auto;
		width: 100%;
		color: black;
	}
}
/*MONITOR SIZE - END*/














/*SERVICES - START*/
@media screen and (min-width: 801px) and (max-width: 1280px){
	.HeroServices {/*Hero Image and area*/
        display: flex;
        margin: 75px auto 0;
        width: 100%;
        min-height: 400px;
        background-image: url("images/Services/GavelTechHero1200x467.jpg"); /*first rgba values give dark effect to image*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: contain;
        align-content: center;
        align-items: center;
        z-index: -1;
    }
	.Card-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 90%;
		height: auto;
		margin: 40px auto 0;
		}

	.Card   {
		width: 100%;
		height: auto;
		display: inline-flex;
		flex-direction: row;
		background-color: #EFEFEF;
		border: 2px solid white;
		margin-bottom:15px;
		border-radius: 10px ;
		transition: transform 0.6xs ease;
		box-shadow: 5px 5px 10px gray;
		overflow: hidden;
	}
	.Card:hover {
		transform: translateY(-10px);
		background-color: 2px solid #C8C7CB;
		border: 2px solid white;
		box-shadow: 5px 5px 10px gray;
	}
	.Card-content {
		display: flex;
		flex-direction: column;
		flex: 0 1 70%;
		border-left: 2px solid #DEDEE0;
		margin: 25px;
	}
	.linktext {
		text-decoration: none;
	}
	.linktext h3 {
		color:#014F77;
		font-weight: 600;
		font-size: 2rem;
		padding: 0 20px 0;
		height: auto;
		width: 100%;	
		text-decoration: none;
	}
	.linktext p {
		padding: 15px 20px;
		height: auto;
		width: 100%;
		font-size: 1em;
		color: black;
		text-decoration: none;
	}
	.CardImg {
		display: block;
		flex: 1 1 50%;

	}
	.ThumbImg {
		height: 100%;
		width: 100%;
		border-radius: 8px 8px 0 0 ;
		object-fit: cover;
	}
	.Card-container2 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 90%;
		height: auto;
		margin: 0 auto 40px;

		}
	.Card2 {
		width: 32%;
		background-color: #EFEFEF;
		border: 2px solid white;
		margin: 15px auto;
		border-radius: 10px ;
		transition: transform 0.6xs ease;
		box-shadow: 5px 5px 10px gray;

	}
	.Card2:hover {
		transform: translateY(-10px);
		background-color: 2px solid #C8C7CB;
		border: 2px solid white;
		box-shadow: 5px 5px 10px gray;

	}
	.ThumbImg2 {
		height: 100%;
		width: 100%;

		object-fit: fit;
	}
	.Card-content2 {
		display: flex;
		flex-direction: column;
		flex: 0 1 70%;
		border-top: 2px solid #DEDEE0;
		margin: 10px;
	} 
	.Card-content2 h4 {
		color:#014F77;
		font-weight: 600;
		font-size: 1.25em;
		padding: 5px 10px;
		height: auto;
		width: 100%;
	}
	.Card-content2  p {
		padding: 5px 10px;
		height: auto;
		width: 100%;
		color: black;
	}
	.Card3 {
		width: 100%;
		background-color: #EFEFEF;
		border: 2px solid white;
		margin: 15px auto;

		border-radius: 10px ;
		transition: transform 0.6xs ease;
		box-shadow: 5px 5px 10px gray;	
		padding-left: 10px;
		padding-bottom: 10px;
	}
	.Card3 p {
		width: 100%;
		padding-left: 10px;
	}
	.Card3:hover {
		transform: translateY(-10px);
		background-color: 2px solid #C8C7CB;
		border: 2px solid white;
		box-shadow: 5px 5px 10px gray;

	}
	.Card-container3 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 90%;
		height: auto;
		margin: 20px auto 0;
		border-top: 2px solid #EFEFEF;
		padding: 40px 0 40px;

	}

}
/*TABLET/DESKTOP SIZE - END*/












@media screen and (max-width : 800px ){
	.HeroServices {/*Hero Image and area*/
        display: flex;
        margin: 100px auto 0;
        width: 100%;
        min-height: 300px;
        background-image: url("images/Services/GavelTechHero800x311.jpg"); /*first rgba values give dark effect to image*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: contain;
        align-content: center;
        align-items: center;
        z-index: -1;
    }

				/*MOBILE SERVICES CARDS - START*/
	.Card-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 95%;
		height: auto;
		margin: 30px auto 0;
		}

	.Card   {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		background-color: #EFEFEF;
		border: 2px solid white;
		margin-bottom:15px;
		border-radius: 10px ;
		transition: transform 0.6xs ease;
		box-shadow: 5px 5px 10px gray;
		overflow: hidden;
	}
	.Card:hover {

		background-color: 2px solid #C8C7CB;
		border: 2px solid white;
		box-shadow: 5px 5px 10px gray;

	}
	.Card-content {
		display: flex;
		flex-flow: row wrap;
	}
	.linktext {
		text-decoration: none;
	}
	.linktext h4 {
		color:#014F77;
		font-size: 1.25em;
		font-weight: 600;
		padding: 10px 10px 0;
		height: auto;
		width: 98%;	
		margin: 10px auto;
		border-bottom: 2px solid #DEDEE0;
		text-decoration: none;
	}
	.linktext p {
		padding: 5px 10px;
		height: auto;
		width: 100%;
		color: black;
		text-decoration: none;
	}
	.CardImg {
		display: block;
		flex: 1 1 40%;

	}
	.ThumbImg {
		height: auto;
		width: 100%;
		object-fit: fit;
		border-radius: 8px 8px 0 0;
		flex: 1 1 auto;
	}
	.Card-container2 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 90%;
		height: auto;
		margin: 0 auto 25px;
		}
	.Card2 {
		width: 100%;
		background-color: #EFEFEF;
		border: 2px solid white;
		margin: 8px auto;
		border-radius: 10px ;
		transition: transform 0.6xs ease;
		box-shadow: 5px 5px 10px gray;
	}
	.Card2:hover {

		background-color: 2px solid #C8C7CB;
		border: 2px solid white;
		box-shadow: 5px 5px 10px gray;
	}
	.ThumbImg2 {
		height: 100%;
		width: 100%;
		border-radius: 8px 8px 0 0;
		object-fit: cover;
	}
	.Card-content2 {
		display: flex;
		flex-flow: row wrap;
	}
	.Card-content2 > h4 {
		color:#014F77;
		font-size: 1.25em;
		font-weight: 600;
		padding: 10px 10px 0;
		height: auto;
		width: 98%;	
		margin: 10px auto;
		border-bottom: 2px solid #DEDEE0;
	}
	.Card-content2 > p {
		padding: 5px 10px;
		height: auto;
		width: 100%;
		color: black;
	}
	.Card3 {
		width: 100%;
		background-color: #EFEFEF;
		border: 2px solid white;
		margin: 15px auto;
		border-radius: 10px ;
		transition: transform 0.6xs ease;
		box-shadow: 5px 5px 10px gray;	
		padding-left: 10px;
		padding-bottom: 10px;
	}
	.Card3 h3 {
		color:#014F77;
		font-size: 1.25em;
		font-weight: 600;
		padding: 5px 10px;
		height: auto;
		width: 100%;	
		margin: 10px 0;
	}
	.Card3 p {
		width: 100%;
	}
	.Card3:hover {

		background-color: 2px solid #C8C7CB;
		border: 2px solid white;
		box-shadow: 5px 5px 10px gray;
	}
	.Card-container3 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 95%;
		height: auto;
		margin: 0 auto 40px;
		border-top: 2px solid #EFEFEF;
		padding: 40px 0 40px;
	}

/*MOBILE PORTRAIT VIEW - END*/
}