@charset "utf-8";
/* CSS Document */

:root {
  --brand-blue: #13ade0;
  --brand-maroon: #921309;
	--white: #FFFFFF;
	--black: #000000;
	--yellow: #fe9100;
	--cream: #F3F3F3;
}

*, html, body {font-family: "Poppins", sans-serif;}
.bg-blue {
	background: var( --brand-blue);
}
.bg-cream { background: var(--cream);}

.commonTitle { position: relative; font-size: 42px; padding-bottom: 20px;
margin-bottom: 20px;}
.commonTitle:after {
	content: "";
	width: 60px;
	height: 1px;
	background: #f8c324;
    position: absolute;
    bottom: 0;
    left: 0;
}

.navbar-brand img { width: 100%; max-width: 170px!important;}
.nav-link {color: var( --white);}
.nav-link:hover, .callCont a:hover {color: var(--yellow);}

.iconWrap img { width: 100%; max-width: 50px;}
.ctitle { margin: 0; padding: 0; line-height: 0; color: var(--yellow);}
.callCont a {display: block;
    font-size: 24px;
    text-decoration: none;
    color: #ffffff;
    padding-top: 3px;
    font-weight: 600;}
.callCont a:hover { color: var(--yellow);}
.navbar-toggler {
    padding: 0;
    font-size: 2rem;
    background-color: #ffffff;
    border: 0;
    color: var( --brand-blue);
	width: 40px;
    height: 37px;
}
.navbar-toggler-icon {
    width: 100%;
    height: 100%;
    line-height: 0;
}

.hero {
    position: relative;
    width: 100%;
    height: 80vh; /* Match max-height of image */
    overflow: hidden;
}

.hero:after {
	content: "";
	width: 100%;
	height: 155px;
	background: url("../images/hero-shape.svg") no-repeat bottom center;
	background-size: 100%;
	position: absolute; bottom: 0;
}
img.heroImage { width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000070;
    z-index: 0;
}
.heroCont { margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%); color: var(--white);}
.hero .btn-outline-primary {
	color: #ffffff;
    border-color: #ffffff;
    border-radius: 100px;
    padding-left: 20px;
    padding-right: 20px;
}
.hero .btn-outline-primary:hover {
	border-color: var(--brand-blue);
	background: var(--brand-blue);
}

.aboutUs { color: var(--white); position: relative;}
.aboutUs .btn-warning {border-radius: 100px!important; padding-left: 20px; padding-right: 20px;}
.aboutUs .container {position: relative;}

.getQoteBox {text-align: center;
    width: 100%;
    max-width: 400px;
    padding: 40px;
    border-radius: 10px;
	position: relative;
}

.aboutUs .getQoteBox {
	 position: absolute;
    bottom: -140px!important;
	right: 0;
}
img.bgPic {position: absolute;
    left: 0;
    right: 0;
    width: 100%;
	height: 100%;
    top: 0;
    object-fit: cover; border-radius: 10px;}
.gqOverlay {
	background-color: transparent;
    background-image: linear-gradient(170deg, #F8FFC8 0%, #06958F 100%); overflow: hidden;
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	opacity: 0.9;
	border-radius: 10px;
}
.ovCont { position: relative; z-index: 1; color: var(--black);}
.getQoteBox .form-group {position: relative;}
.getQoteBox .form-group i.bi {position: absolute;
    top: 30px;
    left: 0; color: #FFF;}

.getQoteBox .form-control {
    padding: 6px 0 6px 24px;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #ffffff00;
    background-clip: padding-box;
    border: 0;
	border-radius: 0; border-bottom: 1px solid #FFF;}
.getQoteBox textarea {
	background-color: #ffffff00;
    background-clip: padding-box;
    border: 0;
	border-radius: 0;border-bottom: 1px solid #FFF; padding: 32px 0 6px 24px;
	
}

.getQoteBox input[type="text"]:focus, .getQoteBox input[type="email"]:focus, .getQoteBox input[type="number"]:focus, .getQoteBox textarea:focus { outline: none!important; box-shadow: none;}

.submit {
	background: var(--yellow);
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 50px;
    padding: 10px 25px;
    text-align: right;
    margin-top: 20px;
}

.servicesSec { padding: 70px 0 0 0;}
.servicesSec .text-center.commonTitle:after {
	left: 0;
	right: 0;
	margin: 0 auto;
}


.servicesSec .container {position: relative;
    z-index: 2;}


.srBox { padding: 40px; border-radius: 10px; background: var(--white); position: relative; text-align: center;}
.srPic img {
	width: 100%;
	max-width: 300px;
	aspect-ratio: 1;
	object-fit: cover;
    padding: 0px;
    border-style: solid;
    border-width: 5px 5px 5px 5px;
    border-color: #FFFFFF00;
    border-radius: 250px 250px 250px 250px;
    box-shadow: 10px 10px 25px 0px rgba(0, 0, 0, 0.1);
}
.brandLogo {
	width: 70px;
	position: absolute;
    top: 40px;
    right: 70px;
	
}
.brandLogo img {
	width: 100%;
	height: 70px;
	background: #FFF;
	object-fit: cover;
	border-radius: 40px;
	border-style: solid;
    border-width: 5px 5px 5px 5px;
    border-color: #FFFFFF00;
    border-radius: 250px 250px 250px 250px;
    box-shadow: 10px 10px 25px 0px rgba(0, 0, 0, 0.1);
}

.srBox h6 {    text-align: center;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    padding: 30px 0 20px 0; margin-bottom: 20px; position: relative;}

.srBox h6:after {
    content: "";
    width: 60px;
    height: 1px;
    background: #f8c324;
    position: absolute;
	bottom: 0;
	left: 0; right: 0; margin: 0 auto;
}

a.arrowMore {    font-size: 50px;
    color: var(--yellow); transition: 1s ease;}
a.arrowMore:hover { 
    color: var(--brand-blue); transition: 1s ease;}

.sectionCta {
	padding: 220px 0 120px 0;
	margin-top: -70px;
	 /* The image used */
  background-image: url("../images/Travel.jpg");

  /* Set a specific height */
  min-height: 500px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	position: relative;
}
.sectionCta .container {z-index: 2; position: relative;}
.sectionCta h5 {
	color: var(--yellow);
	font-size: 50px;
	font-weight: 600;
}
.sectionCta h6 {
	color: var(--yellow); font-weight: 600;
}

p.ctaNarration { color: var(--white); font-size: 22px; font-weight: 600;}

.testiM h6 {
	color: var(--yellow);
    text-align: right;
    font-size: 36px;
    font-weight: 300;
}

p.textRight { text-align: right;}

.tmIteam .bi-quote {    font-size: 50px; color: #c9c9c9;
    margin: 0;
    padding: 0;
    line-height: 1;}
p.tmAuthor {color: var(--yellow); font-size: 18px;}

.testiSection {
  max-width: 100%;
  margin: auto;
  padding: 0;
  position: relative;
}

.testiViewport {
  overflow: hidden;
}

.testiMWrapper {
  display: flex;
  transition: transform 0.5s ease-in-out; gap: 30px;
}

.tmIteam {
  min-width: 50%;
  box-sizing: border-box;
  padding: 0 20px 0 0;
}

.tmIteam i {
  font-size: 30px;
  color: #007bff;
}

.tmMessage {
  font-size: 16px;
  margin: 0;
  line-height: 1.6;
}


/* Bullet Navigation */
.tmDots {
  text-align: center;
  margin-top: 20px;
}

.tmDots span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
}

.tmDots span.active {
  background: #ffc107;
}

/* Mobile */
@media (max-width: 768px) {
  .tmIteam {
    min-width: 100%;
  }
}


.testiViewport {
	padding-left: 30px; border-left: 1px solid #c9c9c9;
}


.enqBox .container { padding: 80px 40px; background: var(--yellow); border-radius: 10px; position: relative; z-index: 2;}

.enqBox { color: var(--white);}
.enqBox h6 {
    font-size: 30px;
    font-weight: 600;
    color: var(--white);
}


ul.btnList {margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    gap: 20px;}

ul.btnList a {
	    display: block;
    color: #FFF;
    text-decoration: none;
    font-size: 20px;
	padding: 15px 25px;
	border-radius: 100px;
    line-height: 0;
	transition: 1s ease;
}

a.btnTel {
	border: 1px solid #FFF;
	background: none; transition: 1s ease;
}
a.btnTel:hover { background: #FFF; color: #000; transition: 1s ease;}
a.btnCont { background: #000; border: none; transition: 1s ease;}
a.btnCont:hover {
	 background: none; border: 1px solid #000; color: #000;
}

img.shapePic { position: absolute;     top: -74px;
    width: 100%;
    max-width: 300px;
    right: 70px;}


.siteFooter { padding: 140px 0 40px 0; background: var(--brand-blue); margin-top: -70px; color: #FFF;}
.siteFooter img {width: 100%; max-width: 190px;}
.siteFooter h6 { position: relative; padding-bottom: 15px; margin-bottom: 15px;}
.siteFooter h6:after {
	content: "";
	width: 50px;
	height: 1px;
	background: #FFF;
	position: absolute;
	bottom: 0;
	left: 0;
}


ul.ftrLink { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 15px;}
.siteFooter a {text-decoration: none; color: #FFF; transition: 1s ease;}
.siteFooter a:hover {color: var(--yellow); transition: 1s ease;}

.copyRight {margin: 0 auto;
    padding: 40px 0 0 0;
    text-align: center;
    border-top: 1px solid #0000002b;}
.ig {font-size: 40px;}
.siteFooter .row {padding-bottom: 30px;}


.heroInner {position: relative;
    width: 100%;
    height: 60vh;
    overflow: hidden;}

.elementor-shape-fill {fill: #f3f3f3;}

.srBoxes .row { padding:  15px 0; background: var(--white); border-radius: 10px;} 
.srTitle {font-size: 24px;
    padding: 15px;
    background: var(--yellow);
    color: var(--white);
    border-radius: 2px;}


.contactUs.servicesSec { padding-top: 0;}
.contactUs.servicesSec .row {padding: 0!important;  margin-top: -70px; background: #FFF;
    border-radius: 10px;}

.contactUs.servicesSec .row .col-lg-4.col-md-5.col-sm-12, .contactUs.servicesSec .row .col-lg-8.col-md-7.col-sm-12 { padding: 0;}

.contactUs.servicesSec .getQoteBox {max-width: 100%; padding-top: 200px; padding-bottom: 200px;}

ul.contDetails { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column;}
ul.contDetails li { border-bottom: 1px solid #fff; color: var(--white); padding-bottom: 20px; margin-bottom: 20px;}
ul.contDetails li:last-child { border-bottom: 0; margin: 0; padding: 0;}
ul.contDetails a {color: #000;}


.contForm { padding: 30px;}
.contForm .form-group {position: relative;}
.contForm .bi {
    position: absolute;
    top: 30px;
	left: 10px;}

.contForm input, .contForm textarea { padding-left: 30px;}
.contForm textarea {min-height: 100px;}
.contForm .submit {position: relative;
    width: 100%;
    text-align: center; color: #FFF; font-size: 20px; border-radius: 6px;}

.contForm .submit .bi { position: relative; top: auto;
    padding-right: 14px;}


.pt-7 { padding-top: 70px;}
.pb-7 { padding-bottom: 70px;}
.pb-10 { padding-bottom: 100px;}

@media (max-width: 767px) {
	
	
	.getQoteBox {position: relative; bottom: auto!important; margin-top: 20px; 
    max-width: 100%;}
	.servicesSec {padding: 30px 0 0 0;}
	.sectionCta {padding: 130px 0 70px 0;     min-height: 420px;}
	.testiM h6, p.textRight {text-align: left;}
	.testiViewport {padding-left: 0; border-left: 0;}
	.enqBox .row {flex-direction: column-reverse;}
	.enqBox .container {padding: 30px;}
	img.shapePic {position: relative; top: auto; right: auto;}
	.enqBox h6 {padding-top: 20px;}
	.siteFooter {padding: 100px 0 40px 0;}
	
	.pb-10 {padding-bottom: 50px;}
	
}

@media (max-width: 480px) {
	
	.aboutUs .container {padding-top: 20px;}
	.sectionCta h5 {font-size: 36px;}
	ul.btnList {gap: 15px; flex-direction: column;}
	.servicesSec .row { gap: 15px;}
	.srBox {padding: 30px 20px;}
	.enqBox {padding: 0 10px;}
	.enqBox .container { padding: 30px 20px;}
	.copyRight {padding: 25px 0 0 0;}
	.siteFooter {padding: 90px 0 30px 0;}
	.servicesSec {padding: 0 0 0 0;}
	.servicesSec .pt-5 {padding-top: 1rem!important;}
	.getQoteBox {padding: 30px 20px;}
	.contForm {padding: 30px 15px 0 15px;}
	.contactUs.servicesSec .row {margin-top: -15px;}
	.contactUs.servicesSec .getQoteBox {padding-top: 70px; padding-bottom: 70px; margin: 0;}
	
	.contactUs  .col-lg-4.col-md-5.col-sm-12 {padding: 0 15px;}
	
	
	.commonTitle {
    position: relative;
    font-size: 36px;
		padding-bottom: 15px;}
	
	
.pt-7 { padding-top: 30px;}
.pb-7 { padding-bottom: 30px;}
.pb-10 { padding-bottom: 30px;}

}

