@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
	--black-color: #000000;
    --white-color: #ffffff;
	--offwhite-color: #d6d6d6;
	--first-color: #FF0501;
	--second-color: #FD7902;
}

body {
	font-family: "Kanit", sans-serif !important;
}

ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
a {
    text-decoration: none;
}

p {
	font-weight: 400;
}

/* Top bar */
#top_nav {
    padding: 8px 100px;
}
#top_nav a {
	font-size: 17px;
    font-weight: 500;
	color: var(--black-color);
}
.top_nav_social_icon .top_social_media li {
	display: inline-block;
	padding-right: 15px;
}
.top_nav_social_icon .top_social_media li a i {
	font-size: 20px;
}
.top_nav_social_icon .top_social_media li a i:hover {
	color: var(--second-color);
}

/* Main Navbar */
.navbar {
    position: sticky;
    top: 10px;
    background-color: var(--white-color);
    z-index: 999;
	margin-left: 30px;
	margin-right: 30px;
	border-radius: 10px;
}
.navbar-toggler:focus {
    box-shadow: none;
}
.navbar_icons_item {
    flex-direction: row;
}
.navbar img {
    height: auto;
    width: 150px;
}
.nav-link {
	color: var(--offwhite-color);
	font-weight: 500;
	font-size: 17px;
}
.nav-link:hover {
	color: var(--second-color) !important;
}
.navbar-nav .nav-link.active {
	color:#FD7902;
}


@media only screen and (min-width: 300px) and (max-width: 500px) {
	#top_nav {
		padding: 8px 0;
	}
	#top_nav .justify-content-between {
		justify-content: center !important;
	}
	.top_nav_social_icon {
		display: none;
	}
	.navbar {
		margin-left: 5px;
		margin-right: 5px;
		top: 5px;
	}
	.navbar img {
		height: auto;
		width: 120px;
	}
	.navbar-toggler {
		background-color: var(--white-color);
	}
	.offcanvas {
		background-color: var(--black-color);
		overflow: scroll;
	}
	.offcanvas .navbar-nav {
		padding: 20px;
	}
}
@media only screen and (min-width: 501px) and (max-width: 799px) {
	#top_nav {
		padding: 8px 10px;
	}
	.navbar-toggler {
		background-color: var(--white-color);
	}
	.offcanvas {
		background-color: var(--black-color);
		overflow: scroll;
	}
	.offcanvas .navbar-nav {
		padding: 20px;
	}
}
@media only screen and (min-width: 800px) and (max-width: 1230px) {
	.nav-link {
		font-size: 15px;
	}
}

/* First Section */
#first_section {
	padding: 40px 0;
}
#first_section img {
	height: auto;
	width: 100%;
}
#first_section #first_title {
	font-weight: 500;
}
#first_section #collect_text {
	color: var(--first-color);
	margin: 20px 0;
	font-weight: 500;
}
#first_section #call_text {
	color: var(--first-color);
	font-size: 20px;
	font-weight: 500;
}
#first_section #first_number_text a {
	font-weight: 500;
	color: var(--black-color);
}
#first_section #first_email_text a {
	font-weight: 500;
	color: var(--black-color);
}
#first_section #first_para span {
	font-weight: 500;
	color: var(--first-color);
	font-size: 30px;
}


/* Home */

/* hero section */
#hero_section {
	padding: 40px 0;
}
#hero_section img {
	width: 100%;
}
#hero_section h1 {
	font-size: 50px;
	font-weight: 500;
	line-height: 50px;
}
#hero_section h1 span {
	font-size: 120px;
	color: var(--first-color);
}
#hero_section h3 {
	font-weight: 500;
}
#hero_section p {
	font-size: 20px;
}

@media only screen and (min-width: 300px) and (max-width: 500px) {
	#hero_section {
		padding-top: 20px;
	}
	#hero_section h1 {
		font-size: 30px;
		line-height: 1;
	}
	#hero_section h1 span {
		font-size: 80px;
	}
}


/* Second Section */
#second_section {
	padding: 40px 0;
	background-color: var(--black-color);
}
#second_section h2 {
	color: var(--second-color);
	font-weight: 500;
}
#second_section p {
	color: var(--white-color);
}


/* Third Section */
#third_section {
	padding: 40px 0;
	background-color: var(--black-color);
}
#third_section img {
	width: 100%;
	height: auto;
	border-radius: 10px;
}
#third_section h2 {
	font-size: 60px;
	margin-bottom: 30px;
	font-weight: 500;
	color: var(--white-color);
}
#third_section h3 {
	color: var(--second-color);
	font-weight: 500;
}
#third_section ul li {
	margin: 10px 0;
	color: var(--white-color);
}
#third_section ul li i {
	color: var(--second-color);
}

@media only screen and (min-width: 300px) and (max-width: 500px) {
	#third_section h2 {
		font-size: 40px;
	}
	#third_section img {
		margin-bottom: 20px;
	}
}


/* Lead Form Section */

#lead_form {
	padding: 40px 0;
	background-color: var(--black-color);
}
#lead_form input {
	margin-bottom: 15px;
}
#lead_form input::placeholder {
	opacity: .6;
	font-size: 16px;
}
#lead_form_side {
	background-color: var(--white-color);
	padding: 30px;
	border-radius: 10px;
}
#lead_form_side h3 {
	background: -webkit-linear-gradient(45deg, #FF0501, #FD7902);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#lead_form h2 {
	font-weight: 500;
	color: var(--white-color);
}
#lead_form p {
	color: var(--white-color);
}
#lead_form_side label {
	color: var(--black-color);
	font-size: 18px;
	font-weight: 500;
}
#lead_form_side .btn {
	background: linear-gradient(rgb(255, 0, 0), rgb(255, 120, 42));
	color: #ffffff;
	padding: 10px 20px;
	border: none;
	font-weight: 500;
} 
#lead_form_side .btn:hover {
	background: linear-gradient( rgb(255, 120, 42), rgb(255, 0, 0));
}

/* Lead Form Section */


/* Forth Section */
#forth_section {
	padding: 40px 0;
}
#forth_section h2 {
	font-size: 40px;
	margin-bottom: 30px;
	font-weight: 500;
}
@media only screen and (min-width: 300px) and (max-width: 500px) {
	#forth_section h2 {
		font-size: 30px;
	}
}
@media only screen and (min-width: 800px) and (max-width: 1230px) {
	#forth_section h2 {
		font-size: 30px;
	}
}

/* online section */
#online_section {
	padding: 40px 0;
	background-color: var(--black-color);
}
#online_section h2 {
	font-size: 40px;
	margin-bottom: 30px;
	font-weight: 500;
	color: var(--white-color);
}
#online_section h4 {
	color: var(--white-color);
}
#online_section p {
	color: var(--white-color);
}
#online_section i {
	font-size: 30px;
	color: var(--second-color);
	margin-bottom: 20px;
}
.online_sec_border {
	border: 1px solid var(--white-color);
	padding: 20px 10px;
	border-radius: 10px;
}
.online_sec_border P {
	margin-bottom: 0;
}


/* Confidence */
#confidence_section {
	padding: 40px 0;
	background-color: var(--black-color);
}
#confidence_section h2 {
	color: var(--white-color);
	font-size: 40px;
	font-weight: 500;
}
#confidence_section p {
	color: var(--white-color);
}
#confidence_section h3 {
	color: var(--second-color);
}
#confidence_section hr {
	color: var(--white-color);
	margin: 30px 0;
}

@media only screen and (min-width: 300px) and (max-width: 500px) {
	#confidence_section h2 {
		font-size: 30px;
	}
}


/* Fifth Section */
#fifth_section {
	padding: 40px 0;
}
#fifth_section h2 {
	font-size: 40px;
	margin-bottom: 30px;
	font-weight: 500;
}
#fifth_section h5 span {
	color: var(--second-color);
	font-weight: 500;
}
#fifth_section h4 {
	font-weight: 500;
	margin-bottom: 30px;
}
#fifth_section a {
	margin: 10px 0;
	font-weight: 500;
	color: var(--first-color);
}
#fifth_section .accordion button {
	color: var(--first-color);
	font-weight: 500;
	padding: 0;
}
#fifth_section .accordion-button:focus {
	border-color: transparent;
	box-shadow: none;
}
#fifth_section .accordion-button:not(.collapsed) {
	background-color: transparent;
}

@media only screen and (min-width: 300px) and (max-width: 500px) {
	#fifth_section h2 {
		font-size: 30px;
	}
}


/* Sixth Section */
#sixth_section {
	padding: 40px 0;
	background-color: var(--black-color);
}
#sixth_section h2 {
	font-size: 40px;
	margin-bottom: 30px;
	font-weight: 500;
	color: var(--white-color);
}
#sixth_section h4 {
	font-size: 22px;
	font-weight: 500;
}
#sixth_section img {
	cursor: pointer;
}

#popup {
	position: fixed;
	top: 0;
	bottom: 0;
	background-color: var(--black-color);
	display: flex;
	justify-content: center;
	align-items: end;
	z-index: 200;
}
#popup img {
	width: 70%;
	height: auto;
}
#popup_close {
	position: absolute;
	top: 100px;
	right: 50px;
}
#popup_close i {
	font-size: 30px;
	color: var(--white-color);
	cursor: pointer;
}


@media only screen and (min-width: 300px) and (max-width: 500px) {
	#sixth_section h2 {
		font-size: 30px;
	}
	#popup img {
		width: 90%;
	}
	#popup_close {
		top: 100px;
	}
}

@media only screen and (min-width: 800px) and (max-width: 1230px) {
	#sixth_section h4 {
		font-size: 18px;
	}
}


#blog_section {
	padding: 40px 0;
}
#blog_section h2 {
	font-size: 40px;
	font-weight: 500;
}

#blog_section .card a {
	color: var(--white-color);
	font-weight: 500;
}
#blog_section .btn {
	background: linear-gradient(rgb(255, 0, 0), rgb(255, 120, 42));
	color: #ffffff;
	padding: 10px 20px;
	border: none;
	font-weight: 500;
} 
#blog_section .btn:hover {
	background: linear-gradient( rgb(255, 120, 42), rgb(255, 0, 0));
}


/* Trial Section */
#trial_section {
	padding: 40px 0;
	background-color: var(--black-color);
	margin-top: 30px;
}
#trial_section h2 {
	color: var(--white-color);
}
#trial_section .btn {
	background: linear-gradient(rgb(255, 0, 0), rgb(255, 120, 42));
	color: #ffffff;
	margin-top: 30px;
}
#trial_section .btn:hover {
	background: linear-gradient( rgb(255, 120, 42), rgb(255, 0, 0));
	color: #ffffff;
}

/* Home */


/* About */

#about_bredcrumb {
    padding: 80px 0;
    background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),url("../image/about/brad.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	margin-top: 30px;
}
#about_bredcrumb h1 {
    color: var(--white-color);
}
.about_first_section {
    padding: 30px 0; 
}
.about_first_section img {
	width: 100%;
	height: auto;
}
.about_second_section img {
	width: 100%;
	height: auto;
}
#bred_items li {
	display: inline-block;
	padding: 0 20px;
	font-weight: 500;
	color: var(--white-color);
}

#who_we_section {
	background-color: var(--black-color);
	color: var(--white-color);
}
#who_we_section i {
	font-size: 40px;
}
#who_we_section img {
	width: 100%;
}
#team_member h3 {
	font-size: 40px;
	font-weight: 500;
}
#team_member img {
	width: 100%;
}

#price_section h3 {
	font-size: 40px;
	font-weight: 500;
}
#price_section .price {
	font-size: 60px;
	font-weight: 500;
}
#price_section .btn {
	background-color: var(--first-color);
	color: var(--white-color);
}

.about_forth_section img {
	width: 100%;
	border-radius: 10px;
}

@media only screen and (min-width: 300px) and (max-width: 500px) {
	#team_member h3 {
		font-size: 25px;
	}
	#price_section h3 {
		font-size: 25px;
	}
}

/* About */


/* Service */

#service_bredcrumb {
    padding: 80px 0;
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url("../image/services/brad.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	margin-top: 30px;
}
#service_bredcrumb h1 {
    color: var(--white-color);
}
#service_bredcrumb p {
    color: var(--white-color);
}
#service_first {
	background-color: var(--black-color);
	padding: 50px 0;
	color: var(--white-color);
}
#service_first ul {
	margin-top: 20px;
}
#service_first p {
	font-size: 20px;
}

#service_second {
	background-color: var(--black-color);
	padding: 50px 0;
	color: var(--white-color);
}
#service_second ul {
	margin-top: 20px;
}
#service_second p {
	font-size: 20px;
}

#service_third {
	background-color: var(--black-color);
	padding: 50px 0;
	color: var(--white-color);
}
#service_second ul {
	margin-top: 20px;
}
#service_second p {
	font-size: 20px;
}
#service_third h3 {
	font-size: 40px;
}
#service_third img {
	width: 100%;
}
#service_forth {
	padding: 50px 0;
}
#service_forth h2 {
	font-weight: 500;
}

@media only screen and (min-width: 300px) and (max-width: 500px) {
	#service_first {
		padding: 30px 0;
	}
	#service_first p {
		font-size: 16px;
		margin-top: 20px;
	}
	#service_second {
		padding: 30px 0;
	}
	#service_second p {
		font-size: 16px;
		margin-top: 20px;
	}
}

/* Service */


/* Latest Offer */

#latest_offer_bredcrumb {
    padding: 80px 0;
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url("../image/offers/brad.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	margin-top: 30px;
}
#latest_offer_bredcrumb h1 {
    color: var(--white-color);
}
#latest_offer_bredcrumb p {
    color: var(--white-color);
}
#offer_section span {
	color: var(--first-color);
	font-weight: 500;
}
#offer_section img {
	width: 100%;
}

/* Latest Offer */


/* Our Devices */

#devices_bredcrumb {
    padding: 80px 0;
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url("../image/our-devices/brad.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	margin-top: 30px;
}
#devices_bredcrumb h1 {
    color: var(--white-color);
}
#devices_bredcrumb p {
    color: var(--white-color);
}

#device_top_section {
	margin: 30px 0;
}
#device_top_section img {
	width: 100%;
	border-radius: 10px;
}
#device_top_section h3 {
	font-size: 30px;
	font-weight: 500;
}
.device_first_section {
	padding: 200px 0;
    background-image: url("../image/our-devices/14.jpg");
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
	color: var(--white-color);
}
.device_first_section h2 {
	font-size: 60px;
	font-weight: 500;
}
.device_first_section p {
	font-size: 25px;
}
.device_second_section {
	padding: 200px 0;
    background-image: url("../image/our-devices/15.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	color: var(--white-color);
}
.device_second_section h2 {
	font-size: 60px;
	font-weight: 500;
}
.device_second_section p {
	font-size: 25px;
}
.device_third_section {
	padding: 140px 0;
    background-image: url("../image/our-devices/16.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	color: var(--white-color);
}
.device_third_section h2 {
	font-size: 50px;
	font-weight: 500;
}
.device_third_section p {
	font-size: 25px;
}
.device_forth_section {
	padding: 200px 0;
    background-image: url("../image/our-devices/17.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	color: var(--white-color);
}
.device_forth_section h2 {
	font-size: 60px;
	font-weight: 500;
}
.device_forth_section p {
	font-size: 25px;
}
.device_fifth_section {
	padding: 160px 0;
    background-image: url("../image/our-devices/18.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	color: var(--white-color);
}
.device_fifth_section h2 {
	font-size: 60px;
	font-weight: 500;
}
.device_fifth_section p {
	font-size: 25px;
}

@media only screen and (min-width: 300px) and (max-width: 500px) {
	#device_top_section h3 {
		font-size: 25px;
	}
	.device_first_section {
		padding: 100px 0;
	}
	.device_first_section h2 {
		font-size: 35px;
	}
	.device_first_section p {
		font-size: 20px;
	}
	.device_second_section {
		padding: 100px 0;
	}
	.device_second_section h2 {
		font-size: 35px;
	}
	.device_second_section p {
		font-size: 20px;
	}
	.device_third_section {
		padding: 100px 0;
	}
	.device_third_section h2 {
		font-size: 35px;
	}
	.device_third_section p {
		font-size: 20px;
	}
	.device_forth_section {
		padding: 100px 0;
	}
	.device_forth_section h2 {
		font-size: 35px;
	}
	.device_forth_section p {
		font-size: 20px;
	}
	.device_fifth_section {
		padding: 100px 0;
	}
	.device_fifth_section h2 {
		font-size: 35px;
	}
	.device_fifth_section p {
		font-size: 20px;
	}
}
/* Our Devices */

/* Review Section */
#review_bredcrumb {
    padding: 80px 0;
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url("../image/review/brad.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	margin-top: 30px;
}
#review_bredcrumb h1 {
    color: var(--white-color);
}
#review_bredcrumb p {
    color: var(--white-color);
}

#review_section {
	margin: 30px 0;
}
/* Review Section */


/* Partner */

#partner_bredcrumb {
    padding: 80px 0;
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url("../image/partner/brad.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	margin-top: 30px;
}
#partner_bredcrumb h1 {
    color: var(--white-color);
}
#partner_bredcrumb p {
    color: var(--white-color);
}

#partner_first {
	padding: 30px 0;
}
#partner_first h2 {
	font-size:42px;
	/*font-size: 60px;*/
}
#partner_first .btn {
	background-color: var(--first-color);
	color: var(--white-color);
}
#partner_first img {
	width: 100%;
}
#partner_second {
	padding: 30px 0;
}
#partner_second img {
	padding: 20px;
	width: 100%;
}
#partner_second .partner_second_text {
	position: sticky;
	top: 80px;
}
#partner_second h3 {
	font-size: 50px;
}
#partner_second .btn {
	background-color: var(--first-color);
	color: var(--white-color);
}

@media only screen and (min-width: 300px) and (max-width: 500px) {
	#partner_first h2 {
		font-size: 30px;
	}
	#partner_second h3 {
		font-size: 30px;
	}
	#partner_second img {
		width: 250px;
		height: 100%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Partner */


/* Gallery */

#gallery_bredcrumb {
    padding: 80px 0;
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url("../image/gallery/brad.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	margin-top: 30px;
}
#gallery_bredcrumb h1 {
    color: var(--white-color);
}
#gallery_bredcrumb p {
    color: var(--white-color);
}

#main_section img {
	width: 100%;
}

/* Gallery */


/* Blog */

#news_bredcrumb {
    padding: 80px 0;
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url("../image/news/brad.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	margin-top: 30px;
}
#news_bredcrumb h1 {
    color: var(--white-color);
}

#news_section .card img {
    width: 100%;
}

#news_section .btn {
	background: linear-gradient(rgb(255, 0, 0), rgb(255, 120, 42));
	color: #ffffff;
	margin-top: 30px;
}
#news_section .btn:hover {
	background: linear-gradient( rgb(255, 120, 42), rgb(255, 0, 0));
	color: #ffffff;
}

/* Blog */


/* Single Blog */

#new_single {
    padding: 40px 0; 
}
#new_single h4 {
    margin-bottom: 20px;
}
.side_more_news img {
    width: 80px;
    height: 80px;
	border-radius: 5px;
}
.side_more_news h6 {
    color: var(--second-color);
}
.side_more_news p {
    color: var(--black-color);
}
.side_more_news .single_side_news {
    margin-bottom: 30px;
}
#new_single .card-footer ul li {
    display: inline-block;
    padding-left: 10px;
}
#new_single .card-footer ul li a {
    color: var(--first-color);
    font-size: 20px;
}
.comment_form .btn {
	background-color: #FD7902;
	color: var(--white-color);
}
@media only screen and (min-width: 300px) and (max-width: 500px) {
	.side_more_news {
		margin-top: 30px;
	}
}

/* Single Blog */


/* Contact Us */
#contact_bredcrumb {
    padding: 80px 0;
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url("../image/contact/brad.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	margin-top: 30px;
}
#contact_bredcrumb h1 {
    color: var(--white-color);
}
#contact_bredcrumb p {
	color: var(--white-color);
}
#contact_person img {
	height: 80px;
	width: 80px;
	border-radius: 10px;
}
#contact_person a {
	color: var(--second-color);
}
#contact_form_section .btn {
	background-color: var(--first-color);
	color: var(--white-color);
	font-weight: 500;
}
@media only screen and (min-width: 300px) and (max-width: 500px) {
	#contact_person {
		margin-top: 30px;
	}
}
/* Contact Us */


/* Footer */
footer {
	background-color: var(--black-color);
	padding: 30px 0;
}
footer img {
	width: 120px;
	height: auto;
	margin-bottom: 30px;
}
footer hr {
	margin: 30px 0;
	color: var(--white-color);
}
footer p {
	color: var(--white-color);
}
footer .btn {
	background: linear-gradient(rgb(255, 0, 0), rgb(255, 120, 42));
	color: #ffffff;
	font-weight: 500;
}
footer .btn:hover {
	background: linear-gradient( rgb(255, 120, 42), rgb(255, 0, 0));
	color: var(--white-color);
}
footer .footer_menu_1 li {
	margin-bottom: 10px;
}
footer .footer_menu_1 li a:hover {
	color: var(--second-color);
}
footer .footer_menu_2 li {
	margin-bottom: 10px;
}
footer .footer_menu_2 li a:hover {
	color: var(--second-color);
}
footer .footer_contact_info li {
	margin-bottom: 10px;
	color: var(--white-color);
}
footer .footer_contact_info li i {
	color: var(--white-color);
}
footer .footer_contact_info li a:hover {
	color: var(--second-color);
}
footer a {
	color: var(--white-color);
}

.footer_bottom a:hover {
	color: var(--second-color);
}


@media only screen and (min-width: 300px) and (max-width: 500px) {
	footer .btn {
		margin-bottom: 30px;
	}
	footer .footer_menu_1 {
		margin-bottom: 30px;
	}
	footer .footer_menu_2 {
		margin-bottom: 30px;
	}
}




#btn-back-to-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: none;
    z-index: 999;
    background-color: var(--second-color);
}
#btn-back-to-top i {
    color: var(--white-color);
}