@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');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
p{
    margin-bottom: 0px !important;
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
}
h1, h2, h3, h4, h5, h6{
    margin-bottom: 0px !important;
}
.container{
    max-width: 1140px;
    margin: 0 auto;
    padding: 0px 15px;
}
.section_padding{
    padding: 80px 0px;
}
.heading h3{
 font-size: 28px;
 font-family: "Kanit", sans-serif;
 font-weight: 600;
 font-style: normal;
 color: #000; 
 display: inline-block;
 border-left: 4px solid #eb3300; 
 padding-left: 5px;
 margin-bottom: 10px !important;
}
.heading h1{
    font-size: 48px;
    font-family: "Kanit", sans-serif;
    font-weight: 600;
    font-style: normal;
    color: #eb3300;   
   }
/* =======top_nav========= */
.top_nav{
    background-color: #000;
    color: #ffffff;
    padding: 18px 0px;
}
.top-icon i{
transition: 0.5s;
    }
.top-icon i:hover{
color: #eb3300;
}
/* ==========nav_part============= */
.nav_part{
    padding: 15px 0px;
    background-color: #ffffff;   
    color: #000;
}
.navbar{
justify-content: space-between;
}
.nav_logo a{
font-size: 20px;
font-family: "Kanit", sans-serif;
font-weight: 600;
font-style: normal;
color: #ffffff;
}
ul{
 margin-bottom: 0px !important;
}
ul li{
    list-style-type: none;
    display: inline-block;
}
a{
    text-decoration: none;
}
.nav_menu ul li a{
    color: #000;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;   
    padding:0px 12px !important;
    display: inline-block;
    transition: 0.5s;
}
.nav_menu ul li a:hover{
    color: #eb3300;
}
.search_input{
    position: relative;
}
.search_input input{
background-color:transparent !important;
border: none !important;
border-bottom: 2px solid #000 !important;
}
.search_input input::placeholder{
    font-size: 18px;
    color: #000;
}
.search_icon{
    position: absolute;
    right: 4px;
    bottom: 26px;
}
.search_icon i{
    color: #000;
    font-size: 14px;
}
.bar{
    display: none;
    font-size: 30px;
}
ul{
    padding-left: 0px !important;
}
/* LOGO BUTTON CSS */
.button-53 {
    background-color: #eb3300;
    border: 0 solid #E5E7EB;
    box-sizing: border-box;
    color: #000000;
    display: flex;
    font-family: ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",
    Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji",
    "Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    justify-content: center;
    line-height: 1.75rem;
    padding: .75rem 1.65rem;
    position: relative;
    text-align: center;
    text-decoration: none #000000 solid;
    text-decoration-thickness: auto;
    width: 100%;
    max-width: 300px;
    position: relative;
    cursor: pointer;
    transform: rotate(-2deg);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }
  
  .button-53:focus {
    outline: 0;
  }
  
  .button-53:after {
    content: '';
    position: absolute;
    border: 2px solid #000;
    bottom: 8px;
    left: 8px;
    width: calc(100% - 1px);
    height: calc(100% - 1px);
  }
  
  .button-53:hover:after {
    bottom: 2px;
    left: 2px;
  }
  .nav_part{
    width: 100%;
}
/* =====================about_us=========================== */
.about-img img{
    width: 100%;
}
.about-lower-item{
    padding-top: 50px;
}
.about-text p{
    padding-bottom: 10px;
}
.w-100 {
   height: 100%;
}
.review-part h6{
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 25px;   
}
.review-part span{
    display: block;
    color: #eb3300;
    font-size: 60px;
}
.a-title a{
    display: inline-block;
    font-family: "Kanit", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 16px;   
    color: #000;
    padding-bottom: 6px;
}
.a-title i{
    font-size: 26px;
    color: #eb3300;
    margin-right: 20px;
}
.about-details{
    padding: 30px ;
    background-color: #eb3300;
}
.about-details h5{
font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 18px;   
  color: #ffffff;
  padding-bottom: 10px;  
}
.about-details p{
font-family: 'Poppins';
font-weight: normal;
font-style: normal;
font-size: 14px;   
color: #ffffff;
padding-bottom: 10px;  
}
.about-details a{
  font-family: 'Poppins';
  font-weight: normal;
  font-style: normal;
  font-size: 16px;   
  color: #ffffff; 
}
 /* ================services_part====================== */
 .services_part{
    background-color: #c4c0c0;
 }
.services_part .heading{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.services_part .heading h1{
   color: #000;
}
.services_part .heading a{
    display: inline-block;
    background-color: #eb3300;
    font-family: 'Poppins';
 font-weight: normal;
 font-style: normal;
 font-size: 16px;   
 color: #ffffff; 
 padding:12px 20px;
 transition: 0.5s;
}
.services_part .heading a:hover{
    background-color: #000;
}
.ser_down-sec{
    padding-top: 80px;
}
.ser_card{
    background-color: #ffffff;
    box-shadow: 2px 8px 5px #2c2a2a;
    padding: 20px 15px 40px;
    position: relative;
    i{
        font-size: 35px;
    }
    h3{
        font-family: "Kanit", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 28px;  
        color: #eb3300;   
        padding: 8px 0px;     
    }
    p{
        font-family: 'Poppins';
        font-weight: normal;
        font-style: normal;
        font-size: 14px;   
        color: #000;      
    }
    a{
        position: absolute;
        left: 20px;
        right: 20px;
        display: inline-block;
        background-color: #eb3300;
        text-decoration: none;
        font-size: 18px;
        color: #ffffff;
        padding: 12px 20px ;
        margin: 4% 0px;
        transition: 0.5s;
    }
    a:hover{
        background-color: #000;  
    }
   a i{
        font-size: 16px;  
    }
}
.services-lower{
    margin-top: 8%;
}
/* ===============team_part======================= */
.team_section .heading{
    text-align: center;
    max-width: 55%;
    margin:0 auto ;
}
.team_details-sec{
    margin-top: 50px;
}
.card img{
height: 100%;
}
.owl-theme .owl-nav {
    display: none;
}
.card{
    border-radius: 0px !important;
    margin-bottom: 10%;
    padding: 10px;
    box-shadow: 2px 8px 5px #0f0f0f;
}
.card-title{
    color: #080707;
    font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 18px;  
  text-align: center; 
}


/* ===============blog-part================= */
.blog_section .heading{
text-align: center;
}
.blog_item{
    padding-top: 40px;
}
.row-border{
    margin-bottom: 20px;
    border-bottom: 1px solid #a5a3a3;
}
.blog-img img{
    width: 100%;
    padding:30px;
}
.media-part span{
    margin-right: 10px;
}
.media-part h6{
    font-size: 18px;
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: normal;
    display:inline-block ;
}
.media-part i{
    color: #eb3300;
    transition: 0.5s;
}
.media-part i:hover{
    color: #000;
}
.blog-title{
    margin-top: 20px;
    p{
        font-size: 18px;
        font-family: "Kanit", sans-serif;
        font-weight: 300;
        font-style: normal;
        margin-bottom: 10px;
    }
}

/* ===========pricing-sec============== */
.pricing-ele{
    margin-top: 40px;
}
.pricing-sec .heading{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pricing-sec .heading a{
    display: inline-block;
    background-color: #eb3300;
    font-family: 'Poppins';
 font-weight: normal;
 font-style: normal;
 font-size: 16px;   
 color: #ffffff; 
 padding:12px 20px;
 transition: 0.5s;
}

.pricing-sec .heading a:hover{
    background-color: #000;
}
.pricing-sec .heading a i{
margin-left: 10px;
}
.card-border{
    padding: 40px;
    transition: 0.5s;
}
.card-border:hover{
    background-color: rgb(192, 190, 190);
    color: #ffffff;
}
.pricing-card-title h3{
    font-family: "Kanit", sans-serif;
    font-size: 35px;
    font-weight: 500;
    color: #000000;
}
.pricing-card-title h6{
    font-family: "Kanit", sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: #000000;   
    padding: 20px 0 20px;
}

.pricing-card-title p i{
    color: green;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgb(37, 37, 37);
    font-size: 16px;
    font-weight: 900;
    padding: 2px;
}
.pricing-card-title p{
    font-family: "Kanit", sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    margin: 15px 0px;
}
.pricing-card-title  .btn:hover{
    background-color: #ffffff;
}
.call-btn{
    margin-top: 40px;
    background-color: #eb3300;
    transition: 0.5s;
}
.call-btn:hover{
    background-color: #000;
}
.call-btn a{
    color: #ffffff;
    font-family: "Kanit", sans-serif;
    font-size: 18px;
    font-weight: 400;
    display: inline-block;
    padding: 16px 0px 16px 12px;
}

/* ==============contact-part================== */
.contact-section{
    margin-bottom: 50px;
}
.contact-item{
    background-color: #eb3300;
    padding: 30px;
}
.con-up{
    color: #ffffff;
    font-family: "Kanit", sans-serif;
    h3{
        font-size: 40px;
        font-weight: 400;
        font-style: normal;
    }
    p{
        font-size: 16px;
        font-weight: 300;
        font-style: normal;
        padding: 6px 0px;
    }
}
.map{
    height: 100%;
}
.map iframe{
    height: 100%;
    width: 100%;
}
.contact-form{
    margin-top: 20px;
}
.contact-form input{
width: 100%;
margin-bottom: 10px;
padding: 5px 0px 5px 5px;
}
.contact-form input::placeholder{
    color: #000;
    font-family: "Kanit", sans-serif;
    font-size: 16px;
font-weight: 400;
font-style: normal;
}
.contact-form textarea::placeholder{
    color: #000;
    font-family: "Kanit", sans-serif;
    font-size: 16px;
font-weight: 400;
font-style: normal;
}
.contact-form textarea{
    display: block;
    width: 100%;
    padding: 5px 0px 60px 5px;
}
.contact-btn{
    background-color: #ffffff;
    margin-top: 5px;
    transition: 0.5s;
}
.contact-btn:hover{
    background-color: #000;
}
.contact-btn a{
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
    padding: 6px 0px;
    color: #000;
    text-align: center;
    width: 100%;
    transition: 0.5s;
}
.contact-btn a:hover{
color: #ffffff;
}
/* =============footer-part============== */
.ser-footer-part{
    padding: 80px 0;
    background-color: #141414;
    color: #ffffff;
     }
    .footer_title p{
 font-family: "Kanit", sans-serif;
    font-size: 16px;
    font-weight: 300;
 padding-top: 25px;
    }
.footer_heading h3{
    font-family: "Kanit", sans-serif;
    font-size: 38px;
    font-weight: 400; 
    color: #eb3300;
 margin-bottom: 10px !important;
}  
    .footer_link i{
    color: #eb3300;
    font-size: 14px;
    transition: 0.5s;
    }
    .footer_link i:hover{
    color: #ffffff;
    }
    .footer_icon{
    display: flex;
    gap: 20px;
    margin-top: 10px;
    }
    .f-icon i{
     font-size: 22px;  
     transition: 0.5s;
    }
    .f-icon i:hover{
        color: #ffffff;
    }
    .f_form{
        position: relative;
    }
    .f_mail input{
        width: 100%;
        border: 4px solid #ffffff !important;
    }
    .f-side-icon{
        position: absolute;
        top: 1px;
        bottom: 2px;
        right: 1px;
    }
    .f-side-icon i{
        color: #ffffff;
        width: 30px;
        height: 30px;
        background-color: #eb3300;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.5s;
    }
    .f-side-icon i:hover{
        color: #000;
    }
    .contact_Link{
    margin-top: 20px;
        display: flex;
        gap: 10px;
    }
    .contact_Link i{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 22px;
        background-color: #ffffff;
        color: #eb3300;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.5s;
    }
    .contact_Link i:hover{
     color: #000;  
    }
.footer2{
    padding-left: 80px;
}
.footer3{
    padding-left: 30px;
}
.footer_link p{
    font-weight: 300;
}
/* ==========sub-footer============ */
.sub-footer{
    background-color: #000000;
}
.sub-title p{
    color: #ffffff;
    font-size: 16px;
    font-style: normal;
font-family: 'Poppins';
padding: 20px 0px;
text-align: center;
}
/* ===============1250px================ */
@media screen and (max-width:1250px){
.section_padding {
    padding: 20px 0px;
}
.about-lower-item {
    padding-top:20px;
}
.ser_down-sec {
    padding-top: 20px;
}
}
/* =====================992px=================== */
@media screen and (max-width:992px){
.bar{
display: block;
}
.navbar{
    position: relative;
}
.nav_menu{
display: none;
position: absolute;
top: 82px;
left: -15px;
right: -15px;
z-index: 1;
background-color: #ffffff;
}
.nav_menu ul li {
display: block !important;
}
.nav_menu ul li a{
    padding-left: 0px;
    margin-bottom: 8px !important;
    font-size: 15px;
}
.show{
display: block !important;
}   
.nav_search_sec{
    display: none;
} 

.row{
    gap: 0px !important;
}
.about-text{
    padding-top: 5px;
}
.about-details {
    padding: 15px;
    margin-top: 20px;
}
.review-part h6{
font-size: 22px;
padding: 15px 0px;
}
.review-part span {
    font-size: 45px;
}
.ser_card{
margin-bottom: 10%;
}
.services-lower{
    margin-top: 2%;
}
.item img{
height: 100%;
}
.team_section .heading{
    max-width: 100%;
}
.team_details-sec{
    margin-top: 20px;
}
.blog_item {
    padding-top: 20px;
}
.blog-img img {
    padding: 0px;
    margin-bottom: 15px;
}
.card-border {
 padding: 0px;
}

.pricing-card-title h3 {
    font-size: 22px; 
}
.pricing-card-title h6 {
    padding: 10px 0px;
}
.call-btn {
    margin-top: 15px;
    margin-bottom: 20px;
}
.ser-footer-part{
    padding: 30px 0;
}
.footer2{
    padding-left:0px;
    margin: 20px 0px;
}
.footer3 {
    padding-left: 0px;
margin: 0px 0px 30px;
}
.contact-section{
    margin-bottom: 0px;
}
.contact-item {
    padding: 10px;
}
.con-up {
    h3 {
        font-size: 30px;

}}
}
/* ==============575px============== */
@media screen and (max-width:575px){
 .top-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
 } 
 .top_nav{
    padding: 5px 0px;
 }
.top-left-item p{
font-size: 15px;
 }
 .top-icon-title p{
    font-size: 16px;
 }
 .heading h3 {
    font-size: 20px;
    margin-bottom: 2px !important;
}
 .heading h1 {
    font-size: 30px;
 }










}











  @media (min-width: 768px) {
    .button-53 {
      padding: .75rem 3rem;
      font-size: 1.25rem;
    }
  }