html,
body {
    height: 100%;
    font-family: sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smooth: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /* margin: 0; */
    font-weight: 400;
    font-family: sans-serif;
}

h1 {
    font-size: 70px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 30px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

p {
    font-size: 16px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 26px;
    margin: 0 0 15px 0;
}

img {
    max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
    outline: none;
}

a:hover,
a:focus {
    text-decoration: none;
    outline: none;
    color: #ffffff;
}

ul,
ol {
    padding: 0;
    margin: 0;
}


/*---------------------
  Breadcrumb
-----------------------*/

.breadcrumb-section {
    display: flex;
    align-items: center;
    padding: 45px 0 40px;
}

.breadcrumb__text h2 {
    font-size: 46px;
    color: #ffffff;
    font-weight: 700;
}

.breadcrumb__option a {
    display: inline-block;
    font-size: 16px;
    color: #ffffff;
    font-weight: 700;
    margin-right: 20px;
    position: relative;
}

.breadcrumb__option a:after {
    position: absolute;
    right: -12px;
    top: 13px;
    height: 1px;
    width: 10px;
    background: #ffffff;
    content: "";
}

.breadcrumb__option span {
    display: inline-block;
    font-size: 16px;
    color: #ffffff;
}

/*---------------------
  Contact
-----------------------*/

.contact {
    padding-top: 80px;
    padding-bottom: 50px;
    background: #3a6186;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(white, #343a40);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(rgba(161, 185, 99, 0.5), white);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
}

.contact__widget {
    margin-bottom: 30px;
}

.contact__widget span {
    font-size: 36px;
    color: #7fad39;
}

.contact__widget h4 {
    color: #1c1c1c;
    font-weight: 700;
    margin-bottom: 6px;
    margin-top: 18px;
}

.contact__widget p {
    color: #666666;
    margin-bottom: 0;
}

/*---------------------
  Map
-----------------------*/

.map {
    height: 500px;
    position: relative;
}

.map iframe {
    width: 100%;
}

.map .map-inside {
    position: absolute;
    left: 50%;
    top: 60px;
    -webkit-transform: translateX(-175px);
    -ms-transform: translateX(-175px);
    transform: translateX(-175px);
}

.map .map-inside .inside-widget {
    width: 350px;
    background: #ffffff;
    text-align: center;
    padding: 23px 0;
    position: relative;
    z-index: 1;
    -webkit-box-shadow: 0 0 20px 5px rgba(12, 7, 26, 0.15);
    box-shadow: 0 0 20px 5px rgba(12, 7, 26, 0.15);
}

.map .map-inside .inside-widget h4 {
    font-size: 22px;
    font-weight: 700;
    color: #1c1c1c;
    margin-bottom: 4px;
}

.map .map-inside .inside-widget ul li {
    list-style: none;
    font-size: 16px;
    color: #666666;
    line-height: 26px;
}

/*---------------------
  Contact Form
-----------------------*/

.content-header {
    font-family: 'Oswald';
    color: #fcc500;
    font-size: 45px;
}

.section-content {
    text-align: center;

}

.contact-form {

    font-family: 'Lora', sans-serif;
    padding-top: 60px;
    width: 100%;
    height: 550px;
    background: #3a6186;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(white, #343a40);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(white, #343a40);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
}

.contact-section {
    padding-top: 40px;
}

.contact-section .col-md-6 {
    width: 50%;
}

.form-line {
    border-right: 1px solid #B29999;
}

.form-group {
    margin-top: 10px;
}

label {
    font-size: 1.3em;
    line-height: 1em;
    font-weight: normal;
}

.form-control {
    font-size: 1.3em;
    color: #080808;
}

textarea.form-control {
    height: 135px;
    /* margin-top: px;*/
}

.submit {
    font-family: 'Oswald';
    font-size: 1.1em;
    float: right;
    width: 150px;
    background-color: transparent;
    color: #fff;

}

/*---------------------
  Footer
-----------------------*/

footer {
    background-color: #343a40; /* Màu nền */
    color: #fff; /* Màu chữ */
    padding: 40px 0; /* Khoảng cách giữa các phần tử bên trong */
}

/* Navigation Links Style */
footer ul {
    padding: 0;
    list-style: none; /* Loại bỏ dấu đầu dòng */
}

footer ul li {
    margin-bottom: 10px; /* Khoảng cách giữa các mục trong danh sách */
}

footer ul li a {
    color: #fff; /* Màu chữ của các liên kết */
    text-decoration: none; /* Loại bỏ gạch chân */
    transition: color 0.3s ease; /* Hiệu ứng chuyển đổi màu khi di chuột qua */
}

footer ul li a:hover {
    color: #ffc107; /* Màu chữ khi di chuột qua */
}

/* Newsletter Form Style */
footer form input[type="email"] {
    margin: 0 auto; /* Đặt margin tự động để căn giữa */
    width: 90%; /* Độ rộng của ô nhập email */
    padding: 10px; /* Khoảng cách nội dung và viền của ô nhập */
    border: none; /* Loại bỏ viền */
    border-radius: 4px; /* Bo tròn các góc */
    margin-bottom: 10px; /* Khoảng cách giữa các ô nhập */
}

footer form button[type="submit"] {
    background-color: #ffc107; /* Màu nền của nút gửi */
    border: none; /* Loại bỏ viền */
    color: #343a40; /* Màu chữ của nút */
    padding: 10px 20px; /* Khoảng cách nội dung và viền của nút */
    border-radius: 4px; /* Bo tròn các góc */
    cursor: pointer; /* Con trỏ khi di chuột qua */
}

footer form button[type="submit"]:hover {
    background-color: #ffca28; /* Màu nền của nút khi di chuột qua */
}

/* Social Media Icons */
footer .fa {
    font-size: 24px; /* Kích thước của biểu tượng */
    margin-right: 10px; /* Khoảng cách giữa các biểu tượng */
}



/*--------------------------------- Responsive Media Quaries -----------------------------*/

@media only screen and (min-width: 1200px) {
    .container {
        max-width: 1170px;
    }
}

/* Medium Device = 1200px */



/* Tablet Device = 768px */



/* Small Device = 320px */

@media only screen and (max-width: 479px) {
    .map .map-inside {
        -webkit-transform: translateX(-125px);
        -ms-transform: translateX(-125px);
        transform: translateX(-125px);
    }

    .map .map-inside .inside-widget {
        width: 250px;
    }
}