/*HOME PAGE*/

@media (min-width: 661px) {.homecap {-webkit-animation: slidecap 1s;}}

@media (min-width: 500px) {
@keyframes bgimgboxzoom {
   0% {-webkit-transform: translateY(-50%) scale(0.5); opacity: 0;}
   100% {-webkit-transform: translateY(-50%) scale(1); opacity: 1;}
}
.bgimgbox {-webkit-animation: bgimgboxzoom 1s;}

@keyframes sblockzoom {
0% {-webkit-transform: scale(0); transform: scale(0); opacity: 0;}
1% {-webkit-transform: scale(.5); transform: scale(.5); opacity: 0;}
5% {-webkit-transform: scale(1.05); transform: scale(1.05); opacity: 1;}
10% {-webkit-transform: scale(1); transform: scale(1); opacity: 1; transform-origin: 20% 0%;}
}
.sb:nth-child(1) {-webkit-animation: sblockzoom 12s;}
.sb:nth-child(2) {-webkit-animation: sblockzoom 14s; animation-delay: .08s;}
.sb:nth-child(3) {-webkit-animation: sblockzoom 16s; animation-delay: .1s;}
.sb:nth-child(4) {-webkit-animation: sblockzoom 18s; animation-delay: .15s;}

@keyframes logoscale {0% {-webkit-transform: scale(0.5);} 100% {-webkit-transform: scale(1);}}
#logo img {-webkit-animation: logoscale .8s; -webkit-backface-visibility: hidden;}

} /*close min-width: 500px*/

#bread {padding-top: 20px;}

/*--------------------------------*/


/*Top image*/

#homepic {position: relative; height: calc(120px + 32vw); max-height: 500px; overflow: hidden; display: flex; align-items: center; background-color: #035063;}
#homepic img {width: 500px; height: 300px; width: 100vw; height: auto; display: block;}

#hpcont {position: absolute; margin: auto; left: 0; right: 0; text-align: center; z-index: 1;}

.homecap {position: absolute; left: 0; text-align: left; max-width: 850px; z-index: 1; font-size: 70px; color: #FFF;}
.homecap h1 {font-family: 'Archivo', Arial, Helvetica, sans-serif; font-weight: 500; font-size: 1em; line-height: 1.1; text-shadow: 1px 1px 2px #000;}
.homecap div:first-of-type {font-size: .35em; line-height: 1.4; letter-spacing: .3px; padding-top: 20px; font-weight: 400 !important;}

@media (max-width: 1400px) and (min-width: 771px) {.homecap {width: calc(70vw - 170px);} .homecap h1 {font-size: calc(6.5vw - 13px);}}

@media (max-width: 990px) {.homecap div:first-of-type span {display: block;}}
@media (min-width: 861px) {
.homecap {top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%)}
@keyframes slidecap {0% {top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); opacity: 0;} 100% {top: 50%; -webkit-transform: translate(0%,-50%); transform: translate(0%,-50%); opacity: 1;}}
}
@media (max-width: 860px) {
.homecap {top: 52%; -webkit-transform: translateY(-52%); transform: translateY(-52%); width: calc(70vw - 170px);}

@keyframes slidecap {0% {top: 52%; -webkit-transform: translate(-52%,-52%); transform: translate(-52%,-52%); opacity: 0;} 100% {top: 52%; -webkit-transform: translate(0%,-52%); transform: translate(0%,-52%); opacity: 1;}}
}
@media (max-width: 830px) {.homecap div:first-of-type {font-size: 2.9vw;}}
@media (min-width: 771px) {#hpcont {width: 88%; max-width: 1300px;}}
@media (max-width: 770px) {#hpcont {width: 92%;} .homecap h1 {font-size: calc(7vw - 18px);} .homecap div:first-of-type {font-size: 3vw;}}

@media (min-width: 706px) {.homecap h1 span {display: block;}}
@media (max-width: 705px) {
.homecap {width: calc(75vw - 190px);} .homecap h1 {font-size: 5vw;}
.homecap div:first-of-type {visibility: hidden; font-size: 0; line-height: 0; padding: 0;}
}
@media (min-width: 611px) {.btn {margin: 35px auto 0 auto;} .btn a {padding: 12px 20px; font-size: 19px;}}
@media (max-width: 610px) {.btn {margin-top: 25px;} .btn a {padding: 9px 17px; font-size: 18px;}}

@media (max-width: 660px) {
.homecap {width: 100% !important;} .homecap h1 {font-size: 9.5vw !important;}
.btn {margin-top: 20px;} .btn a {padding: 9px 14px 8px 14px; font-size: 17px;}
}
/*@media (min-width: 501px) {#homepic img {filter: brightness(65%);}}*/
@media (max-width: 500px) {#homepic {height: calc(120px + 42vw);}}
@media (max-width: 530px) {.btn a {color: #000 !important}}
@media (max-width: 480px) {.homecap {width: calc(78vw - 170px);} .homecap h1 {font-size: calc(9vw - 16px);}}
@media (max-width: 480px) and (min-width: 501px) {.btn {display: none;}}
@media (max-width: 660px) {
.homecap {top: 45%; -webkit-transform: translateY(-45%); transform: translateY(-45%); width: auto; text-align: center;}
.homecap h1 {font-size: 8.8vw;} .btn {display: table; margin: 20px auto 0 auto;}
}
@media (max-width: 600px) {#homepic {height: 50vw;}}

.btn a {line-height: 1.4; text-decoration: none; white-space: nowrap; border-radius: 6px; font-weight: 500; color: #000; background-color: #FFF301;}
.btn a:before {border: #FFF301 solid 6px;}

@-webkit-keyframes rippleout {100% {top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0;}}
@keyframes rippleout {100% {top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0;}}
.btn a {display: table-cell; position: relative;}
.btn a:before {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-animation-duration: 1s; animation-duration: 1s; pointer-events: none; border-radius: 5px;}
.btn a:hover:before, .btn a:focus:before, .btn a:active:before {-webkit-animation-name: rippleout; animation-name: rippleout; border-radius: 5px;}


/*----------------*/

/*How Can We Help Box*/

.bgimgbox {position: absolute; text-align: center; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); line-height: 1.3; background-color: #FFF; padding: 19px 25px 12px 25px; border-radius: 2px; z-index: 2;}
.bgimgbox div:first-child {text-align: center; margin: auto !important; font-size: 1.25em; font-weight: 500; padding-bottom: 4px;}
.bgimgbox div {display: table; margin: 10px 0; vertical-align: middle; transform: translateZ(0); transform: translate3d(0,0,0);}
.bgimgbox a {display: table-cell; width: 220px; height: 60px; margin: 5px 0; color: #FFF; border-radius: 5px; vertical-align: middle; transition: 0.2s; font-size: 1.25em; white-space: nowrap; text-decoration: none; text-transform: uppercase;}
.bgimgbox a {background-color: #113275;} .bgimgbox a:hover {background-color: #164BB6; color: #FFF301;}

@media (max-width: 860px) {
.bgimgbox {padding: 15px 20px 8px 20px;} .bgimgbox a {width: 200px; height: 50px; margin: 4px 0; font-size: 1.15em;}
.bgimgbox div:first-child {font-size: 1.1em; padding-bottom: 3px;}
}
@media (max-width: 660px) {.bgimgbox {display: none;}}

/*@media (max-width: 650px) {
.bgimgbox {padding: 10px 15px 3px 15px;} .bgimgbox a {width: 180px; height: 45px; margin: 3px 0; font-size: 1.05em;}
.bgimgbox div:first-child {font-size: 1em; padding-bottom: 2px;}
}*/

/*--------------------------------*/

/*Svc Boxes*/

#svcblks {position: relative; display: table; margin: 0 auto; line-height: 0; width: 100%; text-align: center; padding: 35px 0; background-color: var(--menuback);}
.sb {width: 25%; position: relative; display: inline-block; vertical-align: top; max-width: 250px;}
.sb div {display: block; text-align: center; margin: 0 15px 15px 15px; transition: .2s; overflow: hidden; border-radius: 50%; border: 4px solid #FFF; -webkit-mask-image: -webkit-radial-gradient(white, black);}
.sb h2 {position: relative; display: block; text-align: center; left: 0; right: 0; margin: auto; font-size: 20px; line-height: 1.2; font-weight: 500;}
.sb h2 a {color: #FFF; text-decoration: none !important; transition: .2s; display: inline-block;} .sb h2 a:hover {color: #FFF301;}
.sb h2 img {display: block; transition: .4s; transform: translateZ(0); width: 213px; height: 213px; object-fit: cover;}

@media (min-width: 1151px) {.sb {margin: 0 10px;}}
@media (max-width: 1070px) {.sb h2 img {width: 100%; height: auto;} .sb h2 span {display: block;}}
@media (min-width: 841px) {.sb h2:hover div {border: 4px solid #FFF301;}}
@media (max-width: 840px) {#svcblks {padding: 30px 0;} .sb div {border: 3px solid #FFF;} .sb h2:hover div {border: 3px solid #FFF301;}}

@media (min-width: 811px) {#svcblks {white-space: nowrap;} #sbback {display: table; margin: 0 auto; width: 95%;}}
@media (max-width: 810px) {
#svcblks {padding: 30px 0;} .sb {width: 50%; padding: 0 15px;} .sb div {height: 140px;}
.sb:nth-child(3), .sb:nth-child(4) {margin-top: 35px;}
.sb a div {max-width: 180px; margin: 0 auto 10px auto;} .sb h2 {margin: 0 auto 20px auto; white-space: nowrap}
}
@media (min-width: 501px) {.sb h2:hover img {filter: brightness(110%) saturate(110%);}}
@media (max-width: 640px) {.sb {padding: 0; width: 45%;}}
@media (max-width: 500px) {.sb div {height: 120px;} .sb h2 img {width: 130px; height: 130px;}}
@media (max-width: 380px) {#svcblks {display: none;}}

/*--------------------------------*/

/*Why Us*/

#whyus {background-color: #113275;} #whyus .bodyarea {padding: 50px 0 30px 0;}
#whyus .heading {text-align: center; font-size: 1.7em; color: #FFF301;}

#whyusboxes {margin: 30px auto;}
#whyusboxes .box {display: inline-block; margin: 10px 2px; font-size: 17px; line-height: 1.55; background-color: #FFF; break-inside: avoid; color: #555; border-radius: 5px;}
#whyusboxes .box div:first-child {width: 100%; margin-bottom: 20px; font-size: 1.5em; line-height: 1.15; font-weight: 500; padding-bottom: 20px; border-bottom: 1px solid #CCC; color: var(--menuhover);}

@media (min-width: 1201px) {#whyusboxes .box {padding: 23px;}}
@media (max-width: 1200px) {#whyusboxes .box {padding: 20px;}}
@media (min-width: 1041px) {#whyusboxes {-webkit-column-count: 3; column-count: 3;}}
@media (max-width: 1040px) {#whyusboxes {-webkit-column-count: 2; column-count: 2; margin: 35px auto 25px auto;}}
@media (max-width: 720px) {#whyusboxes {-webkit-column-count: 1; column-count: 1;}}

/*--------------------------------*/

/*About Us*/

.aboutus {background-color: #E5E5E5;} .aboutus .bodyarea {padding: 50px 0;}
.aboutus .heading {color: var(--menuhover);} .aboutus img {margin-top: 8px;}
@media (min-width: 1591px) {.aboutus img {max-width: 310px;}}
@media (min-width: 901px) {.aboutus .pagepic {margin-top: 20px;}}

/*--------------------------------*/

/*New Area*/

.newareaback {padding: 50px 0; background-color: var(--menuselect);}
.newarea {position: relative; text-align: left; font-size: 19px; line-height: 1.4; max-width: 1450px; margin: auto;}
.newareatext {text-align: left; font-size: inherit; line-height: 1.6; color: #FFF;}
.newareatext div {font-size: 2.15em; line-height: 1.2; font-weight: 500; margin: 0 0 20px 0; color: #FFF301;}
.newareaimg {position: relative; background-repeat: no-repeat; background-size: cover; height: 100%;}
.newarea ul {margin: 0 0 0 -17px;} .newarea ul:first-child {margin-bottom: 25px;}

@media (max-width: 900px) {.newareatext div {font-size: 2em;}}
@media (min-width: 701px) {
.newarea {display: table; padding: 30px 0; width: 85%; box sizing: border-box;}
.newareatext {padding: 20px 0 20px 50px;} .newareaimg {width: 40%; display: table-cell; border-radius: 5px; background-position: 23% 50%;}
}
@media (max-width: 700px) {
.newareaback, .newarea {padding: 0;} .newareatext {padding: 50px 6vw 40px 6vw;}
.newareaimg {height: 60vw; width: 100%; margin: auto; background-position: 50% 35%;}
}
@media (min-width: 501px) {.newareaimg {background-image: url("images/pic1.jpg");}}
@media (max-width: 500px) {.newareaimg {background-image: url("images/pic2.jpg");} .newareatext div {text-transform: none; font-size: 1.8em;}}
@media (max-width: 400px) {.newareatext div {font-size: 1.7em;}}

/*--------------------------------*/

/*Service Area*/

.servicearea .bodyarea {padding: 50px 0 50px 0;} .servicearea .bodyhead {color: #0A3CA2;} .servicearea .heading {color: #0A3CA2;}
.map img {width: 400px; height: 400px; width: 100%; height: auto; border-radius: 50%; display: block; border: 1px solid #555;}

@media (max-width: 1195px) {.servicearea .bodyarea {width: 90%;}}

@media (min-width: 891px) {.map {max-width: 400px; float: right; margin: 40px 0 10px 25px; padding-bottom: 40px;}}
@media (max-width: 890px) {.map {text-align: center; margin: 35px auto 45px auto; max-width: 400px;}}

@media (max-width: 410px) {.servicearea .bodyarea {width: 85%; padding: 50px 0 30px 0;} .map {margin: 20px auto 40px auto;}}

.servicearea ul {margin-left: -15px;}

/*-----------------------------------------------*/

/*Video*/

.cgi-rt {position:relative; pointer-events: none; height:720px; max-height:720px; max-width:1280px;}
@media (max-width: 1280px) {.cgi-rt {max-height: 610px;}}
@media (max-width: 1060px) {.cgi-rt {max-height: 500px;}}
@media (max-width: 860px) {.cgi-rt {max-height: 410px;}}
@media (max-width: 700px) {.cgi-rt {max-height: 335px;}}
@media (max-width: 550px) {.cgi-rt {max-height: 260px;}}
@media (max-width: 510px) {.cgi-rt {max-height:255px;}}
@media (max-width: 420px) {.cgi-rt {max-height: 200px;}}
@media (max-width: 330px) {.cgi-rt {max-height: 190px;}}