/* -----------------------------------
		Reason to choose us CSS
----------------------------------- */
.chooseusContainer { }
.choose-us { }
.choose-us .card {
	color: currentColor;
	padding: 15px;
	border: none;
	background: none;
}
.choose-us .card:hover {
	cursor: default;
	letter-spacing: 0.35px;
	border: 1px solid #eaeaea;
	background: url("../images/bg-img/bg-bank-detail.jpg") center no-repeat;
	background-size: cover;
	box-shadow: rgba(0, 0, 0, .26) 0px 1px 1px;
}
.choose-us .card img {
	margin: 0 auto;
	display: block;
}
.choose-us .card img:first-child {
	width: 50%;
}
.choose-us .card-body img {
	margin: 15px auto;
}
.choose-us .card-title {
	text-align: center;
	font-family: "Source Sans Pro";
	font-weight: 700;
	color: #2e5984;
	text-transform: uppercase;
}
.choose-us .card-text {
	font-family: "Sarabun";
	letter-spacing: normal;
	word-wrap: break-word;
}
@media (max-width: 767px){
	.choose-us .card {
		cursor: default;
		letter-spacing: 0.35px;
		border: 1px solid #eaeaea;
		background: url("../images/bg-img/bg-bank-detail.jpg") center no-repeat;
		background-size: cover;
		box-shadow: rgba(0, 0, 0, .26) 0px 1px 1px;
	}
	.choose-us .card:hover {
		display: block;
	}
}



/* -----------------------------------
		   Web Packages CSS
----------------------------------- */
.webPackages {
	padding: 60px 0 30px 0;
}
.tableWebpackages {
	padding: 30px 0 0 0;
	background: url("../images/bg-img/bg-cloud-line-horizontal.jpg") left top repeat-x;
}
@media (max-width: 991px){
	.tableWebpackages {
		padding: 0;
	}
}
.pricing-table {
	background-color: white;
	box-shadow: 0px 1px 10px -6px rgba(0, 0, 0, .15);
	padding: 2rem;
	border-radius: 8px;
	transition: .2s;
	border: 1px solid whitesmoke;
}
.pricing-table:hover {
	box-shadow: 0px 1px 10px -4px rgba(0, 0, 0, .15);
}
.pricing-table .pricing-label {
	border-radius: 2px;
	padding: .25rem .5rem;
	margin-bottom: 1rem;
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
}
.pricing-table h2 {
	color: currentColor;
	font-size: 24px;
	font-weight: 600;
}
.pricing-table h5 {
	color: #919191;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .3px;
	padding-bottom: 20px;
	border-bottom: 1px solid #eaeaea;
}
.pricing-table .pricing-features {
	margin-top: 1.25rem;
}
.pricing-table .pricing-features ul {
	padding: 0 0 0 15px;
	list-style: none;
	list-style-position: outside;
}
.pricing-table .pricing-features ul li {
	margin: 15px 10px 0 0;
	padding: 0 0 0 30px;
	background: url("../images/icons/check-mark-icon.png") left center no-repeat;
	line-height: normal;
}

.pricing-table .price-tag {
	text-align: center;
	font-weight: 500;
}
.pricing-table .gap-pricetag {
	margin-top: 38px;
}
.pricing-table .price-tag .amount {
	letter-spacing: -2px;
	font-size: 64px;
}
.pricing-table .price-tag .moneyUnit {
	font-size: 24px;
	margin-left: 5px;
}
.pricing-table .price-tag .warning-pricetext {
	color: darkred !important;
	font-size: 14px;
	display: block;
}
.pricing-table .price-button {
	display: block;
	color: white;
	margin-top: 2rem;
	padding: .75rem;
	border-radius: 5px;
	text-align: center;
	transition: .3s;
	text-decoration: none;
}
.pricing-table .price-button::before,
.enterprisePackage .price-button::before,
a.examWeb-link::before,
.faq-webPack-description .accordion-faq .accordion-button::before {
	display: inline-block;
	font-family: "Font Awesome 6 Free";
	margin-right: 8px;
	font-weight: 900;
}
.pricing-table .price-button::before {
	content: "\f291";
}
.enterprisePackage .price-button::before {
	content: "\f573";
}
a.examWeb-link::before {
	content: "\f0c1";
	font-size: 18px;
}
.pricing-table .price-button:hover {
	font-weight: 500;
}

.purple .pricing-label {
	background-color: #cad2ff;
	color: #627afe;
}
.purple h2,
.purple .price-tag {
	color: #627afe;
}
.purple h5 {
	border-bottom: 1px dashed #627afe;
}
.purple .price-button {
	background-color: #627afe;
}
.purple .price-button:hover {
	background-color: darkslateblue;
}

.turquoise .pricing-label {
	background-color: #b9edee;
	color: #44cdd2;
}
.turquoise h2,
.turquoise .price-tag {
	color: #44cdd2;
}
.turquoise h5 {
	border-bottom: 1px dashed #44cdd2;
}
.turquoise .price-button {
	background-color: #44cdd2;
}
.turquoise .price-button:hover {
	background-color: darkcyan;
}

.red .pricing-label {
	background-color: #ffc4c4;
	color: #ff5e5e;
}
.red h2,
.red .price-tag {
	color: #ff5e5e;
}
.red h5 {
	border-bottom: 1px dashed #ff5e5e;
}
.red .price-button {
	background-color: #ff5e5e;
}
.red .price-button:hover {
	background-color: darkred;
}

.enterprisePackage {
	padding: 30px;
	margin: 15px 0 60px 0;
	width: 100%;
	border-radius: 8px;
	background-color: white;
	background-image: url("../images/bg-img/bg-webdesignPackages02.png");
	background-position: top right;
	background-repeat: no-repeat;
	background-size: auto;
	box-shadow: 0px 1px 10px -6px rgba(0, 0, 0, .15);
}
.enterprisePackage h2,
.enterprisePackage h5 {
	width: 50%;
}
.enterprisePackage h5 {
	border: none;
}
.black .pricing-label,
a.examWeb-link {
	background-color: rgba(255, 245, 178, 1);
	color: goldenrod;
}
.black .price-button {
	padding: 13px 30px;
	color: gold;
	display: inline-block;
	background-color: rgba(0, 0, 0, 1);
}
.black .price-button:hover,
a.examWeb-link:hover {
	background-color: goldenrod;
	color: black;
}
a.examWeb-link {
	padding: 14px 30px;
	margin-left: 7px;
	border-radius: 5px;
	text-align: center;
	transition: .3s;
	text-decoration: none;
}
@media (max-width: 767px){
	.enterprisePackage {
		background-image: url("../images/bg-img/bg-bank-detail.jpg");
		background-size: cover;
		box-shadow: 0px 1px 10px -6px rgba(0, 0, 0, .15);
	}
	.enterprisePackage h2,
	.enterprisePackage h5,
	.black .price-button {
		width: 100%;
	}
	.enterprisePackage .price-button {
		margin-top: 0 !important;
	}
	a.examWeb-link {
		display: block;
		margin: 15px 0;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	.enterprisePackage {
		height: 785px;
		background-position: bottom right;
		background-size: contain;
	}
	.enterprisePackage h2,
	.enterprisePackage h5 {
	  	width: 100%;
	}
	.black .price-button
	{
		display: block;
		width: 100%;
	}
	a.examWeb-link {
		display: block;
  		margin: 15px 0;
	}
}
@media (max-width: 991px) {
	.pricing-table .gap-pricetag {
		margin-top: 0;
	}
}
@media (min-width: 1367px) {
	.pricing-table .gap-pricetag {
		margin-top: 0;
	}
}



/* -----------------------------------
		  Web Portfolios CSS
----------------------------------- */
.webPortfolios {
	padding: 30px 0 60px 0;
}
@media (max-width: 991px){
	.webPortfolios {
		padding: 0 0 60px 0;
	}
}

.clientsCarousel { }
.clientsCarousel .carousel-item .card {
	border: none;
	padding: 0 15px;
}
.clientsCarousel .carousel-item .card p {
	margin: 15px 0;
	color: #666;
	font-size: 18px;
	font-family: "Source Sans Pro";
}
.clientsCarousel .carousel-item .card p::before {
	font-family: "Font Awesome 6 Free";
	content: "\f0c1";
	margin-right: 7px;
	font-weight: 900;
}
.clientsCarousel .carousel-control-next,
.clientsCarousel .carousel-control-prev {
	width: 2%;
}
.clientsCarousel .carousel-control-prev-icon {
  	background-image: url("../images/icons/lightblue-prev-icon.png");
}
.clientsCarousel .carousel-control-next-icon {
  	background-image: url("../images/icons/lightblue-next-icon.png");
}
@media (max-width: 767px){
	.clientsCarousel .carousel-control-next,
	.clientsCarousel .carousel-control-prev {
	  	width: 7%;
	}
	.clientsCarousel .carousel-inner .carousel-item > div {
		display: none;
	}
	.clientsCarousel .carousel-inner .carousel-item > div:first-child {
		display: block;
	}
}
.clientsCarousel .carousel-inner .carousel-item.active,
.clientsCarousel .carousel-inner .carousel-item-next,
.clientsCarousel .carousel-inner .carousel-item-prev { 
	display: flex;
}
@media (min-width: 768px){
	.clientsCarousel .carousel-inner .carousel-item-end.active,
	.clientsCarousel .carousel-inner .carousel-item-next {
		transform: translateX(33.33333333%);
	}
	.clientsCarousel .carousel-inner .carousel-item-start.active,
	.clientsCarousel .carousel-inner .carousel-item-prev { 
		transform: translateX(-33.33333333%);
	}
}
.clientsCarousel .carousel-inner .carousel-item-end,
.clientsCarousel .carousel-inner .carousel-item-start {
	transform: translateX(0);
}



/* -----------------------------------
		  FAQ Web package CSS
----------------------------------- */
.faq-webPackage {
	padding: 60px 0;
	background-color: #f8f8f8;
	background-image: url("../images/bg-img/bg-abstract-ploygon.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.faq-webPack-description { }
.faq-webPack-description span {
	color: #2569d9;
	font-family: "Kanit";
	font-weight: normal;
	font-size: 24px;
	margin-bottom: 0;
}
.faq-webPack-description h2 {
    display: block;
	position: relative;
  	margin-bottom: 30px;
	padding-bottom: 20px;
    font-size: 40px;
}
.faq-webPack-description h2::after,
.ma-service h2::after {
	content: "";
	position: absolute;
	width: 80px;
	height: 3px;
	left: 0;
	bottom: 0;
	background-color: #2569d9;
}
.faq-webPackage .col-lg-5 img {
	display: block;
	margin: 30px auto 0 auto;
}

/*       FAQ Accordion CSS
----------------------------------- */
.faq-webPack-description .accordion-faq .accordion-button {
	font-family: "Kanit";
	font-size: 18px;
	letter-spacing: 0.2px;
}
.faq-webPack-description .accordion-faq .accordion-button::before {
	content: "\f059";
}
.faq-webPack-description .accordion-faq .accordion-button:focus {
	outline: none;
}
.faq-webPack-description .accordion-faq .accordion-body p,
.faq-webPack-description .accordion-faq .accordion-body ul li {
	margin-bottom: 0;
	font-family: "Sarabun";
	color: #4d4d4d;
}
.faq-webPack-description .accordion-faq .accordion-body ul {
	padding: 0 0 0 45px;
	margin: 0;
	list-style-position: outside;
}
.faq-webPack-description .accordion-faq .accordion-body ul li {
	margin-bottom: 7px;
}
@media (max-width: 767px){
	.faq-webPackage {
		padding: 30px 0;
		background-position: right;
	}
	.faq-webPack-description span,
	.faq-webPack-description h2 {
		display: block;
		text-align: center;
	}
	.faq-webPack-description h2::after {
		left: 38%;
	}
}
@media (min-width: 768px) and (max-width: 991px){
	.faq-webPackage .col-lg-5 {
		display: none;
	}
}



/* -----------------------------------
		  Hotline CSS
----------------------------------- */
.hotline-area {
	margin: 90px 0;
 	background: rgb(202,50,126);
	background: -moz-linear-gradient(120deg, rgba(202,50,126,1) 15%, rgba(247,52,85,1) 100%);
	background: -webkit-linear-gradient(120deg, rgba(202,50,126,1) 15%, rgba(247,52,85,1) 100%);
	background: linear-gradient(120deg, rgba(202,50,126,1) 15%, rgba(247,52,85,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ca327e",endColorstr="#f73455",GradientType=1); 
}
.hotline {
	padding: 30px 0;
}
.hotline .col-md-6:first-child {
	position: relative;
}
.hotline .col-md-6:first-child img {
	position: absolute;
	top: -100%;
}
.hotline h1,
.hotline h4 {
	font-weight: 600;
}
.hotline h1 {
	color: yellow;
}
.hotline h4 {
	margin-bottom: 0;
}
.hotline h4::after {
	content: "";
	width: 80px;
	height: 3px;
	background-color: white;
}

.contact-webDesign {
	padding: 60px 0;
}
.contact-webDesign label {
    color: currentColor;
	font-family: "Kanit";
}
.contact-webDesign .btn-send {
    font-weight: 500;
	letter-spacing: .3px;
    }
.contact-webDesign .help-block.with-errors {
    color: #ff5050;
    margin-top: 5px;
}
.contact-webDesign .card {
	margin-left: 10px;
	margin-right: 10px;
}
@media (max-width: 767px){
	.hotline-area {
		margin: 0;
		text-align: center;
	}
	.hotline .col-md-6:first-child img {
		display: none;
	}
	.contact-webDesign .btn-send {
		width: 100%;
	}
}
@media (min-width: 768px) and (max-width: 991px){
	.hotline-area {
		margin: 0;
	}
	.hotline .col-md-6:first-child img {
		top: -20%;
	}
	.hotline h1 {
		font-size: 46px;
	}
	.whitecloud-pattern {
		display: none;
	}
}



/* -----------------------------------
	    Web design order CSS
----------------------------------- */
.webdesignOrder-area { }
.webdesignOrder-tab {
	display:  block;
	margin-top:  15px;
}
.webdesignOrder-tab .nav-pills .nav-link,
.webdesignOrder-tab .nav-pills .nav-link.active {
	color:  #ccc;
	background-color:  white;
	border:  2px solid #ccc;
	border-radius:  50px;
	padding:  10px 25px;
	font-weight:  500;
	font-size:  18px;
	margin: 0 10px 15px 0;
    letter-spacing: 0.5px;
}
.webdesignOrder-tab .nav-pills .nav-link.active,
.webdesignOrder-tab .nav-pills .nav-link:hover {
	color:  darkred;
	background-color:  #fbb03b;
	border:  2px solid #f7931e;
}
.mailto {
	padding: 0 0 0 45px !important;
}
.mailto ul {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-position: outside;
}
.mailto ul li {
	margin: 5px 0 10px 0;
	text-align: center;
}
.mailto ul li::before {
	content: "\f1d8";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 18px;
	color: #2569d9;
	margin-right: 10px;
}
.mailto ul li > a {
	word-wrap: break-word;
	color: currentColor;
	font-size: 18px;
	font-family: "Source Sans Pro";
	font-weight: 600;
}
.mailto ul li > a:hover {
	color: #2569d9;
}
.webdesignOrder-tab .form-label {
  	margin-bottom: 0;
	color: #2569d9;
}
.webdesignOrder-tab .col-lg-6 .img-fluid {
	display: block;
	margin: 0 auto !important;
	height: 1250px;
}
.webdesignOrder-tab .col-lg-6 .img-fluid2 {
	display: block;
	margin: 0 auto !important;
	height: 680px;
}


@media (max-width: 767px) {
	.webdesignOrder-area .mb-7 {
		margin-bottom: 0 !important;
	}
	.webdesignOrder-details {
		padding:  30px 0 0 0;
	}
    .webdesignOrder-tab .nav-pills .nav-link,
    .webdesignOrder-tab .nav-pills .nav-link.active {
        width: 375px;
        margin: 0 0 7px 0;
        border-radius: 3px;
    }
}
@media (max-width: 991px){
	.webdesignOrder-tab {
		margin-bottom: 30px;
	}
	.mailto {
		padding: 0 !important;
		text-align: center;
	}
	.webdesignOrder-tab .col-lg-6 .img-fluid {
		display: none;
	}
}



/* -----------------------------------
		      Banks CSS
----------------------------------- */
.payment-area {
	padding: 30px 0;
}
.blog-bank {
	position: relative;
  	margin: 20px auto auto 55px !important;
  	box-shadow: rgba(0, 0, 0, 0.26) 0px 1px 5px;
  	padding: 15px;
  	border-radius: 10px;
  	transition: all 0.3s;
  	background: url("../images/bg-img/bg-bank-detail.jpg") center no-repeat;
	background-size: cover;
}
.bank-logo {
  	width: 100px;
  	height: 100px;
	position: absolute;
  	box-shadow: rgba(0, 0, 0, 0.26) 0px 1px 5px;
  	border-radius: 10px;
  	transform: translateX(-65px);
  	overflow: hidden;
}
.bank-logo::after {
  	content: "";
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	border-radius: 10px;
}
.bank-logo img {
  	width: 100%;
  	height: 100%;
  	display: block;
  	border-radius: 8px;
  	transition: all 0.3s;
}
.blog-bankcontent {
  	padding-left: 55px;
}

.blog-bankcontent > * {
  	transition: all 0.4s;
}

.blog-bankcontent span {
	display: block;
	padding: 0 0 15px 0;
	margin: 0 0 15px 0;
	border-bottom: 1px solid #ccc;
  	font-size: 20px;
  	font-weight: 500;
	font-family: "Kanit";
	line-height: 24px;
	letter-spacing: .3px;
}
.blog-bankcontent p,
.attch-file p {
	font-family: "Sarabun";
	color: #4d4d4d;
	font-weight: normal;
	word-wrap: break-word;
	margin: 0;
}

.bbl-bank { color: #1f4396; }
.ktb-bank { color: #01a6e6; }
.krungsri-bank { color: #6f5f5e; }
.kasikorn-bank { color: #2fb457; }
.scb-bank { color: #5c2483; }

.link-confirmpage {
	margin: auto auto auto 55px !important;
}
.link-confirmpage span {
	font-family: "Kanit";
	font-size: 20px;
	font-weight: normal;
	line-height: normal;
	margin-bottom: 15px;
	display: block;
	color: red;
}
.link-confirmpage span::before {
	content: "\f10d";
	font-family: "Font Awesome 6 Free";
	font-size: 40px;
	font-weight: 900;
	color: red;
	margin-right: 10px;
}
.link-confirmpage p {
	font-family: "Sarabun";
	font-size: 18px;
	margin: 0 0 5px 0;
	font-weight: 500;
}
.link-confirmpage i {
	margin-right: 10px;
}
.note-list {
	margin:  0 0 60px 0;
}
.note-list span {
	font-family: "Kanit";
	font-size: 20px;
	font-weight: 500;
	color: #2569d9;
	margin-bottom: 10px;
}
.note-list ul {
	padding: 0 0 0 40px !important;
	margin: 15px 0 0 0;
	list-style: decimal;
	list-style-position: outside;
}
.note-list ul li {
	padding: 0;
	font-family: "Sarabun";
	color: currentColor;
	margin-bottom: 10px;
	font-weight: normal;
}

.form-card .form-select {
	font-family: "Sarabun";
}
.confirm-form { }
.confirm-form .col-md-5 img {
	height: 990px;
	box-shadow: rgba(0, 0, 0, 0.26) 0px 1px 5px;
}
.confirm-form p {
	font-family: "Kanit";
	font-size: 18px;
	font-weight: normal;
	margin-bottom: 40px;
	text-align: center;
}
.confirm-form .form-check-inline {
	margin-left: 10px;
}
@media (max-width: 767px){
	.payment-area h4 {
		text-align: center !important;
	}
	.bank-logo {
  		width: 70px;
  		height: 70px;
	}
	.blog-bankcontent {
	  	padding-left: 25px;
	}
	.id-card {
		display: none;
		margin-bottom: 0 !important;
	}
	p.col-md-12.thai.fs-base.fw-500.text-center.mt-2 {
		margin-top: 0 !important;
	}
	.confirm-form span.form-check-label.radio-title.blue-text.fw-500.w-auto {
		width: 100% !important;
	}
}
@media (max-width: 991px){
	.link-confirmpage {
		margin: auto !important;
		text-align: center;
		padding: 20px;
		border-radius: 10px;
		background: url("../images/bg-img/bg-bank-detail.jpg") center center no-repeat;
		background-size: cover;
		box-shadow: rgba(0, 0, 0, 0.26) 0px 1px 5px;
	}
	.link-confirmpage span {
		font-size: 19px;
		padding-bottom: 20px;
		border-bottom: 1px solid #ccc;
	}
	.link-confirmpage span::before {
		font-size: 34px;
	}
	.confirm-form .col-lg-5 {
		display: none;
	}
}


	
/* -----------------------------------
	    Date & Time Picker CSS
----------------------------------- */
.datetimepicker,
.persontype-phone { }

.datetimepicker .input-group-addon {
  	cursor: pointer;
}
.datetimepicker i.input-group-text {
	line-height: 1.5;
}
.datepicker-controls .view-switch {
  	color: #2569d9 !important;
}
.datepicker-view .dow {
	color: dodgerblue !important;
}



	
/* -----------------------------------
	       MA Services CSS
----------------------------------- */
.ma-service {
	margin-top: 30px;
	font-family: "Kanit";
}
.ma-service h2 {
	font-size: 36px;
	color: #2569d9;
	position: relative;
	margin-bottom: 30px;
	padding-bottom: 20px;
}
.ma-service p {
	font-size: 18px;
	line-height: 32px;
	margin-bottom: 30px;
}


@media (max-width: 991px){
	.ma-service h2 {
		text-align: center;
	}
	.ma-service h2::after {
		left: 45%
	}
	.ma-service a.btn-outline-link {
		margin: 0 auto !important;
	}
}
@media (min-width: 768px) and (max-width: 991px){
	.ma-service {
		margin-top: 0;
	}
	.ma-service img.img-popup-top {
		display: none;
	}
}