@import url('base.css');

.banner { background: url(../images/gg_ban_pdt.jpg) no-repeat top center / cover; clear: both; padding: 100px 0px 15%; width: 100%; }
.banner h1, .banner p, .banner a { color: var(--bs-white); }
.banner h1 { margin-top: 15%; }
.banner h1 span { color: var(--light-blue); font: 500 24px var(--main-text-font); }
.banner p { font-weight: 300; margin: 2% 0px 3%; max-width: 715px; }

.intro { clear: both; padding: 8% 0px; width: 100%; }
.intro h4 { color: #002353; font: 300 28px var(--main-text-font) }

.details { background-color: rgba(0, 130, 195, 9%); clear: both; padding: 8% 0px; width: 100%; }
.details ul { list-style: none; margin: 0; padding: 0; }
.details ul li { background: url("../images/gg_blt.png") no-repeat left 3px; color: var(--navy-blue); font: 400 18px var(--main-head-font); margin-bottom: 20px; padding-left: 20px; }
.details ul li a { color: var(--navy-blue); }

.gallery { background-color: rgba(0, 130, 195, 20%); clear: both; padding: 8% 0px; width: 100%; }
.gallery .carousel-indicators { margin-bottom: -10%; }
.gallery .carousel-indicators [data-bs-target] { background-color: inherit; border: 0px; width: 156px; }
.gallery .carousel-control-next, .gallery .carousel-control-prev { background: transparent; border: 0px; border-radius: 100%; color: #0082C3; height: 42px; top: 45%; width: 42px; }
.gallery .ti-arrow-circle-right, .gallery .ti-arrow-circle-left { font-size: 42px; }
.gallery .carousel-control-next { margin-right: -65px; }
.gallery .carousel-control-prev { margin-left: -65px; }

.prds { clear: both; padding: 8% 0px; width: 100%; }

.prds .back { margin-top: 25px; }
.prds .back a { color: var(--sky-blue); font: 500 18px var(--main-head-font); }
.prds .back a:hover { color: var(--navy-blue); }
.prds .back .ti-arrow-circle-left { font-size: 40px; margin-right: 10px; vertical-align: middle; }

.help { background-color: var(--sky-blue); clear: both; padding: 8% 0px; width: 100%; }
.help h4 { color: var(--bs-white); margin-bottom: 1rem; }
.help p { color: var(--bs-white); font-size: 18px; }
.help a { color: var(--bs-white); font: 500 18px var(--main-head-font); }

.tns-outer { position: relative; }
.tns-controls { position: absolute; width: 100%; z-index: 1;transform: translateY(-50%); top: 50%;margin-top: -100px; }
.tns-controls [aria-controls] { background-color: transparent; border: none; height: 42px; margin: 0px 10px 0px 0px; text-indent: -9999px; width: 42px; }
.tns-controls [aria-controls]:first-child { background-image: url("../images/gg_aro_lft.png"); background-repeat: no-repeat; background-position: center; }
.tns-controls [aria-controls]:last-child { background-image: url("../images/gg_aro_rgt.png"); background-repeat: no-repeat; background-position: center; float:right; margin-right:0; }
.tns-controls [disabled]:first-child { background: url("../images/gg_aro_lft.png") no-repeat center transparent; opacity: 0.5; }
.tns-controls [disabled]:last-child { background: url("../images/gg_aro_rgt.png") no-repeat center transparent; opacity: 0.5; }
.tns-nav { text-align:center; margin-top:40px; }
.tns-nav > button { width:150px; height:100px; background-size:cover; background-position:center; border:0; margin:0 10px; opacity:0.5; }
.tns-nav > button.tns-nav-active { opacity:1; }


/*-------------------
    Media Query
---------------------------*/

@media only screen and (max-width: 767px) {
	.banner h1 { font-size: 36px; }
	.intro h4 { font-size: 18px; }
	.gallery .carousel-control-next, .gallery .carousel-control-prev { display: none; }
	.gallery .carousel-control-next { margin-right:0px; }
	.gallery .carousel-control-prev { margin-left: 0px; }
	.help p { font-size: 15px; }
    .tns-nav > button { width:80px; height:50px; margin:0 3px; }
    .tns-controls { margin-top: -50px; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.intro h4 { font-size: 24px; }
	.gallery .carousel-control-next { margin-right: -30px; }
	.gallery .carousel-control-prev { margin-left: -30px; }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.gallery .carousel-control-next { margin-right: -40px; }
	.gallery .carousel-control-prev { margin-left: -40px; }
}