/*---------- Landing Page ----------*/
@media (max-width: 1440px)
{
    .coming-soon .logo {width: 300px;}
    .coming-soon .icon img {width: 150px;}
    .coming-soon .txt {font-size: 24px;}
}

@media (max-width: 1200px)
{
    .coming-soon .sm div {margin: 20px;}
    .coming-soon .sm a {font-size: 20px;}
}

@media (max-width: 500px)
{
    .coming-soon .logo {width: 150px;}
    .coming-soon .icon img {width: 100px;}
    .coming-soon .sm {bottom: 30px;display: flex;left: 50%;transform: translateX(-50%);right: unset;}
    .coming-soon .sm a {font-size: 16px;}
    .coming-soon .txt {font-size: 12px;}
}

/*---------- Global Contents ----------*/
@media (max-width: 1600px)
{
    .content-title {font-size: 40px;line-height: 55px;}
    .content-text {font-size: 18px;}
    .page-button a {padding: 18px 20px 16px;font-size: 14px;}
}

@media (max-width: 1440px)
{
    .page-pre-title {font-size: 30px;margin: 0 0 10px 0;}
    .content-title {font-size: 35px;line-height: 40px;}
    .content-text {font-size: 14px;}
}

@media (max-width: 1200px)
{
    .page-button a {padding: 15px 15px 13px;font-size: 12px;}
}

@media (max-width: 1024px)
{
    .no-resp {display: none !important;}
    .only-resp {display: flex;}
}

@media (max-width: 768px)
{
    .page-pre-title {font-size: 26px;margin: 0 0 10px 10px;}
    #appointmentModal .modal-body {padding: 30px;}
}

@media (max-width: 500px)
{
    .no-mobile {display: none !important;}
    .only-mobile {display: flex;}
    .page-pre-title {font-size: 24px;margin: 10px;}
}

/*---------- 3. Menu Area ----------*/
@media (max-width: 1600px)
{
    .menu-area .menu-line .logo img {width: 140px;}
    .menu-area .menu-line .menu-items .menu-item {padding: 18px;font-size: 14px;}
    .menu-area .menu-line .menu-items .menu-item .sub-menu {top: 50px;}
    .menu-area .menu-line .menu-items .menu-item .sub-menu .sub-menu-title {font-size: 14px;}
    .menu-area .menu-line .menu-items .menu-item .sub-menu .sub-menu-item {font-size: 13px;}
}

@media (max-width: 1440px)
{
    .menu-area .pre-line {height: 50px;font-size: 12px;}
    .menu-area .menu-line {height: 90px;}
    .menu-area .menu-line .menu-items .menu-item {padding: 15px;font-size: 13px;}
    .menu-area .menu-line .menu-items .menu-item .sub-menu .sub-menu-title {font-size: 13px;}
    .menu-area .menu-line .menu-items .menu-item .sub-menu .sub-menu-item {font-size: 12px;}
}

@media (max-width: 1200px)
{
    .menu-area .menu-line .logo img {width: 130px;}
}

@media (max-width: 1024px)
{
    .resp-menu-btn {
        flex-direction: column;
        height: 25px;
        justify-content: space-between;
    }

    .resp-menu-btn .line {
        width: 40px;
        height: 3px;
        background: var(--dark-color);
        position: relative;
        transition: all .3s;
    }

    .resp-menu-btn.active .line:nth-child(1) {
        transform: rotate(-45deg);
        top: 6px;
        background: var(--primary-color);
    }

    .resp-menu-btn.active .line:nth-child(2) {
        display: none;
    }

    .resp-menu-btn.active .line:nth-child(3) {
        transform: rotate(45deg);
        bottom: 6px;
        background: var(--primary-color);
    }

    .modal-backdrop {top: 130px;}

    #respMenuModal {
        top: 130px;
        height: calc(100vh - 130px);
    }

    #respMenuModal .modal-body {
        display: flex;
        flex-direction: column;
        font-family: var(--primary-font)
    }

    #respMenuModal .modal-body .app-btn {
        margin: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #respMenuModal .modal-body .app-btn a {
        background: var(--primary-color);
        width: fit-content;
        color: var(--white-color);
        padding: 18px 25px 16px;
        border-radius: 8px;
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    #respMenuModal .modal-body .menu-items {
        margin: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #respMenuModal .modal-body .menu-items .menu-item {
        font-size: 24px;
        margin: 10px 0;
        text-align: center;
    }

    #respMenuModal .modal-body .menu-items .menu-item a {
        padding: 10px 20px;
        border-radius: 8px;
        color: var(--dark-color);
    }

    #respMenuModal .modal-body .menu-items .menu-item.active a {
        background: var(--primary-color);
        color: var(--white-color);
    }

    #respMenuModal .modal-body .menu-items .card {
        border-color: var(--primary-color);
        margin: 10px 0 0;
    }

    #respMenuModal .modal-body .menu-items .card .sub-menu-title {
        font-weight: bold;
        color: var(--primary-color);
        margin-top: 20px;
    }

    #respMenuModal .modal-body .menu-items .menu-item.active .sub-menu-item a {
        background: transparent;
        color: var(--dark-color);
    }

    #respMenuModal .modal-body .menu-items .menu-item.active .sub-menu-item.active a {
        color: var(--primary-color);
    }

    #respMenuModal .modal-body .sm {
        margin: 50px;
        display: flex;
        justify-content: center;
    }

    #respMenuModal .modal-body .sm .item {
        margin: 15px;
        font-size: 24px;
        border: 1px solid var(--primary-color);
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border-radius: 30px;
        background: var(--primary-color);
        color: var(--white-color);
    }
}

@media (max-width: 500px)
{
    .menu-area .menu-line {height: 70px;}
    .menu-area .menu-line .logo img {width: 100px;}
    .resp-menu-btn {height: 20px;}
    .resp-menu-btn .line {width: 30px;height: 2px;}
    #respMenuModal {top: 120px;height: calc(100vh - 120px);}
    #respMenuModal .modal-body .app-btn {margin: 10px;}
    #respMenuModal .modal-body .app-btn a {padding: 10px 20px 8px;font-size: 13px;letter-spacing: 1px;}
    #respMenuModal .modal-body .menu-items {margin: 10px;}
    #respMenuModal .modal-body .menu-items .menu-item {font-size: 14px;margin: 5px 0;}
    #respMenuModal .modal-body .menu-items .menu-item a {padding: 5px 10px;}
    #respMenuModal .modal-body .menu-items .card .sub-menu-title {margin-top: 10px;}
    #respMenuModal .modal-body .sm {margin: 10px;}
    #respMenuModal .modal-body .sm .item {margin: 10px;font-size: 16px;width: 40px;height: 40px;line-height: 40px;border-radius: 20px;}
}

/*---------- HOME - Header Area ----------*/
@media (max-width: 1600px)
{
    .header-area .front {padding-top: 90px;}
    .header-area .back video {height: 1300px;}
    .header-area .front img {width: 270px;}
    .header-area .front .text {font-size: 30px;}
}

@media (max-width: 1440px)
{
    .header-area .front {padding-top: 90px;}
    .header-area .front img {width: 450px;}
    .header-area .front .text {font-size: 25px;}
}

@media (max-width: 1200px)
{
    .header-area .front img {width: 220px;}
    .header-area .front .text {font-size: 23px;}
}

@media (max-width: 1024px)
{
    .header-area .front img {width: 420px;margin: 0;}
    .header-area .back {left: 45%;}
    .header-area .back video {height: 1300px;}
}

@media (max-width: 820px)
{
    .header-area .front {justify-content: flex-start;width: 100%;padding-top: 40%;}
    .header-area .front img {width: 400px;margin: 0;}
    .header-area .back {left: 0%; top: 55%}
}

@media (max-width: 500px)
{
    .header-area .front {padding-top: 70%;}
    .header-area .front img {width: 240px;margin-top: 0px;}
    .header-area .front .text {font-size: 16px;margin: 10px 20px;text-align: center}
    .header-area .back video {height: 600px;}
}

/*---------- HOME - About Us Area ----------*/
@media (max-width: 1600px)
{
    .about-us-area {padding: 75px 4%;}
}

@media (max-width: 1200px)
{
    .about-us-area {padding: 50px 4%;}
}

@media (max-width: 768px)
{
    .about-us-area .content-right {padding-left: 20px;}
}

@media (max-width: 650px)
{
    .about-us-area {flex-direction: column; padding: 40px 15px}
    .about-us-area .content-right {padding-left: 0px;text-align: center;}
    .about-us-area .content-right .content:nth-child(2) {justify-content: center;}
}

/*---------- HOME - Services Area ----------*/
@media (max-width: 1600px)
{
    .services-area {padding: 75px 4%;}
    .services-area .grid-area .grid-item .front {font-size: 35px;padding: 50px;}
    .services-area .grid-area .grid-item .back {padding: 40px;}
    .services-area .grid-area .grid-item .back .title {font-size: 28px;line-height: 40px;}
    .services-area .grid-area .grid-item .back .title img {width: 40px;height: 40px;margin-right: 15px;}
    .services-area .grid-area .grid-item .back .item {font-size: 24px;margin: 30px 0 30px 33px;}
    .services-area .grid-area .grid-item .back .item:before {width: 35px;height: 35px;left: -40px;}
}

@media (max-width: 1440px)
{
    .services-area .grid-area .grid-item .front {font-size: 30px;padding: 40px;}
    .services-area .grid-area .grid-item .back {padding: 40px 30px;}
    .services-area .grid-area .grid-item .back .title {font-size: 24px;}
    .services-area .grid-area .grid-item .back .item {font-size: 20px;margin: 25px 0 25px 30px;}
    .services-area .grid-area .grid-item .back .item:before {width: 30px;height: 30px;left: -35px;}
}

@media (max-width: 1200px)
{
    .services-area {padding: 50px 4%;}
    .services-area .grid-area {margin-top: 50px;}
    .services-area .grid-area .grid-item .front {font-size: 25px;padding: 30px;}
    .services-area .grid-area .grid-item .back {padding: 30px 20px;}
    .services-area .grid-area .grid-item .back .title {font-size: 20px;line-height: 32px;}
    .services-area .grid-area .grid-item .back .title img {width: 30px;height: 30px;margin-right: 10px;}
    .services-area .grid-area .grid-item .back .item {font-size: 18px;margin: 20px 0 20px 27px;}
    .services-area .grid-area .grid-item .back .item:before {width: 25px;height: 25px;}
}

@media (max-width: 1024px)
{
    .services-area .grid-area {margin-top: 20px;}
    .services-area .grid-area .grid-item .front {opacity: 0;}
    .services-area .grid-area .grid-item .back {opacity: 1;padding: 20px 10px;}
    .services-area .grid-area .grid-item .back .item {font-size: 16px;line-height: 22px;margin: 20px 0 20px 27px;}
}

@media (max-width: 500px)
{
    .services-area {padding: 40px 4%;}
    .services-area .grid-area .grid-item {aspect-ratio: unset;padding: 0 15px;}
    .services-area .grid-area .grid-item .box .back {position: relative}
    .services-area .content:nth-child(2) {justify-content: center;}
    .services-area .page-pre-title {margin: 0;}
}

/*---------- HOME - Divider ----------*/
@media (max-width: 1600px)
{
    .divider {padding: 60px;}
    .divider .quote {font-size: 24px;}
}

@media (max-width: 1440px)
{
    .divider {padding: 40px;}
    .divider .quote {font-size: 22px;}
}

@media (max-width: 1200px)
{
    .divider {padding: 40px;}
    .divider .quote {font-size: 18px;}
}

@media (max-width: 768px)
{
    .divider {padding: 30px;}
    .divider .quote {font-size: 18px;}
}

@media (max-width: 500px)
{
    .divider {padding: 20px 10px;}
    .divider .quote {font-size: 14px;}
}

/*---------- HOME - Blog Area ----------*/
@media (max-width: 1600px)
{
    .blog-area {padding: 50px 4%;}
    .blog-area .slider .slide {margin: 50px 10px;}
}

@media (max-width: 1440px)
{
    .blog-area .slider .slide .date {padding: 10px 0 0;}
    .blog-area .slider .slide .title {padding: 10px 0;font-size: 20px;}
    .blog-area .slider .slide .text {font-size: 14px;}
    .blog-area .slider .slick-dots {bottom: -20px;}
    .blog-area .slider .slick-dots li button:before {font-size: 6px;}
    .blog-area .slider .slick-dots .slick-active button:before {font-size: 10px;}
}

@media (max-width: 1200px)
{
    .blog-area .slider .slide .date {padding: 10px 0 0;font-size: 10px;}
    .blog-area .slider .slide .title {padding: 10px 0;font-size: 16px;}
    .blog-area .slider .slide .text {font-size: 12px;}
    .blog-area .slider .slick-dots {bottom: -20px;}
}

@media (max-width: 500px)
{
    .blog-area {padding: 40px 4%;}
}

/*---------- Footer ----------*/
@media (max-width: 1600px)
{
    .footer {padding: 10px 4% 0;}
    .footer .content {padding: 10px 0;}
    .footer .content img {width: 200px;}
    .footer .content .contact .item {padding-top: 30px;}
    .footer .content .contact .item span:nth-child(1) {font-size: 20px;}
    .footer .content .contact .item span:nth-child(2) {font-size: 16px;}
    .footer .content:nth-child(3) {padding: 30px 0;}
    .footer .content .sub-menu,
    .footer .content .copyright {font-size: 16px;}
    .footer .content .sub-menu .item {padding-right: 20px;}
    .footer .content-right {border: 3px solid #222;}
}

@media (max-width: 1200px)
{
    .footer .content {padding: 5px 0;}
    .footer .content img {width: 150px;}
    .footer .content .contact .item {padding-top: 20px;}
    .footer .content .contact .item span:nth-child(1) {font-size: 18px;}
    .footer .content .contact .item span:nth-child(2) {font-size: 14px;}
    .footer .content:nth-child(3) {padding: 20px 0;}
    .footer .content .sub-menu,
    .footer .content .copyright {font-size: 14px;}
    .footer .content-right iframe {width: 400px;}
}

@media (max-width: 1024px)
{
    .footer .content:first-child {justify-content: center}
    .footer .content:nth-child(2) {flex-direction: column;}
    .footer .content-right {margin: 50px 0 0;border: none;}
    .footer .content-right iframe {width: 100%;}
    .footer .content .contact .item {text-align: center;}
}

@media (max-width: 500px)
{
    .footer .content .contact {flex-direction: column;}
    .footer .content .contact .item {padding: 20px !important;}
    .footer .content:nth-child(3) {flex-direction: column;align-items: center;}
    .footer .content .sub-menu {display: flex; justify-content: space-around}
    .footer .content .sub-menu .item {padding: 0px;}
    .footer .content .copyright {margin-top: 20px;}
}

/*---------- PAGES - Global ----------*/
@media (max-width: 1600px)
{
    .page .page-header .title {font-size: 39px;}
    .page .page-header .breadcrump {font-size: 13px;}
    .page-content {margin: 75px 100px;padding: 50px;}
}

@media (max-width: 1440px)
{
    .page {padding-top: 50px;}
    .page .page-header {padding: 90px 12% 0;}
    .page .page-header .title {font-size: 35px;}
    .page .page-header .breadcrump {font-size: 12px;}
    .page .page-header .breadcrump a:after {width: 6px;height: 6px;}
    .page-content {margin: 50px 80px;padding: 50px;}
}

@media (max-width: 1200px)
{
    .page-content {margin: 50px 50px;padding: 30px;}
    .page .page-header .title {font-size: 29px;}
    .page .page-header .breadcrump {font-size: 11px;}
    .page .page-header .breadcrump a:after {width: 6px;height: 6px;}
}

@media (max-width: 1024px)
{
    .page-content {margin: 20px 20px;padding: 30px;}
    .page .page-header {aspect-ratio: 3/1;padding: 100px 4% 0;}
}

@media (max-width: 768px)
{
    .page .page-header {aspect-ratio: 5/2;padding: 100px 8% 0;}
    .page .page-header .title {font-size: 24px;}
}

@media (max-width: 500px)
{
    .page-content {margin: 0; padding: 20px;}
    .page .page-header {aspect-ratio: 7/5;padding: 60px 8% 0;}
    .page .page-header .title {font-size: 20px;}
    .page .page-header .breadcrump {font-size: 9px;}
    .page .page-header .breadcrump p:before {width: 4px;height: 4px;}
}




/*---------- PAGES - About Us Page ----------*/
@media (max-width: 1600px)
{
    .about .title {font-size: 40px;line-height: 40px;}
    .about .text {font-size: 16px;}
}

@media (max-width: 1440px)
{
    .about .title {font-size: 36px;line-height: 36px;}
}

@media (max-width: 1200px)
{
    .about .title {font-size: 30px;line-height: 30px;}
    .about .text {font-size: 15px;}
}

@media (max-width: 820px)
{
    .about .image {aspect-ratio: 2/1;margin: 0 0 20px;}
}


/*---------- PAGES - Speciality Page ----------*/
@media (max-width: 1600px)
{
    .speciality .content:first-child {min-width: 300px;}
    .speciality .content .title {font-size: 40px;line-height: 40px;}
    .speciality .content .text {font-size: 16px;}
}

@media (max-width: 1440px)
{
    .speciality .content:last-child {padding: 0 0 0 40px;}
    .speciality .content .title {font-size: 36px;line-height: 40px;}
    .speciality .content .item .item-title {font-size: 16px;}
    .speciality .content .item .item-data {font-size: 14px;}
}

@media (max-width: 1200px)
{
    .speciality .content:last-child {padding: 0 0 0 30px;}
    .speciality .content .title {font-size: 30px;line-height: 30px;}
    .speciality .content .text {font-size: 15px;}
}

@media (max-width: 820px)
{
    .speciality .spec-menu-btn {position: absolute; font-size: 20px;display: flex; align-items: center; top: 10px;}
    .speciality .spec-menu-btn i {margin: 0 10px 0 0;}
    .speciality .content {padding: 0;}
    .speciality .content:first-child {width: 90%;border-right: none;position: absolute;padding: 12px;left: -100%; top: 50px;background: var(--white-color); box-shadow: 0 0 10px rgba(0,0,0,.5); transition: all .3s;}
    .speciality .content:first-child.show {border-right: none;position: absolute;padding: 12px;left: 5%;}
    .speciality .content:nth-child(2) {width: 100%;margin: 40px 0 0;}
}

@media (max-width: 500px)
{
    .speciality .content {padding: 0;}
    .speciality .content:first-child {width: 90%;border-right: none;position: absolute;padding: 12px;left: -500px; top: 50px;background: var(--white-color); box-shadow: 0 0 10px rgba(0,0,0,.5); transition: all .3s;}
    .speciality .content:first-child.show {border-right: none;position: absolute;padding: 12px;left: 5%;}
}


/*---------- PAGES - Team Page ----------*/
@media (max-width: 1600px)
{
    .team .content .title {font-size: 40px;line-height: 40px;}
}

@media (max-width: 1440px)
{
    .team .content {padding: 10px;}
    .team .content .asd {position: sticky;top: 170px;}
    .team .content .pre-title {font-size: 24px;}
    .team .content .title {font-size: 33px;line-height: 35px;width: 90%;}
    .team .content .member .member-data {padding: 40px 30px;}
    .team .content .member .member-data .data .title {font-size: 18px;}
    .team .content .member .member-data .data .text {font-size: 14px;}
}

@media (max-width: 1200px)
{
    .team .content .title {font-size: 30px;line-height: 36px;}
    .team .content .member .info .name {font-size: 16px;}
    .team .content .member .info .spec {font-size: 14px;}
    .team .content .member .member-data {padding: 30px 20px;height: 330px}
    .team .content .member .member-data .data .title {font-size: 16px;}
    .team .content .member .member-data .data .text {font-size: 13px;}
}

@media (max-width: 1024px)
{
    .team,
    .team-details {flex-direction: column;}
    .team .content:first-child,
    .team-details .content:first-child,
    .team .content:last-child,
    .team-details .content:last-child{width: 100%;}
    .team .content .pre-title {font-size: 20px;margin: 0}
}

@media (max-width: 500px)
{
    .team .content,
    .team-details .content {padding: 0px;}
    .team .content .pre-title {font-size: 18px;margin: 0}
}

/*---------- PAGES - Team Details Page ----------*/
@media (max-width: 1600px)
{
    .team-details .item .data .dt-1 {width: 40%;font-size: 14px;}
    .team-details .item .data .dt-2 {width: 60%;font-size: 14px;}
    .team-details .item .data .dt-2 .sm-item {width: 28px;height: 28px;line-height: 28px;font-size: 14px;}
    .team-details .content .title {font-size: 40px;line-height: 40px;}
    .team-details .content .text {font-size: 14px;}
}

@media (max-width: 1440px)
{
    .team-details .content .asd {top: 170px;}
    .team-details .item .data {padding: 24px 0;}
    .team-details .content .title {font-size: 36px;line-height: 40px;}
    .team-details .content .text {font-size: 14px;}
}

@media (max-width: 1200px)
{
    .team-details .item .data .dt-1 {width: 40%;font-size: 12px;}
    .team-details .item .data .dt-2 {width: 60%;font-size: 12px;}
    .team-details .item .data .dt-2 .sm-item {width: 25px;height: 25px;line-height: 25px;font-size: 12px;margin-right: 5px;}
    .team-details .content .title {font-size: 30px;line-height: 36px;}
    .team-details .content .text {font-size: 13px;}
}

@media (max-width: 500px)
{
    .team-details .item .data {padding: 24px 10px 24px 0;}
    .team-details .content .title {font-size: 30px;line-height: 36px;margin:20px 0 10px;}
    .team-details .content .text {font-size: 13px;}
}

/*---------- PAGES - FAQ Page ----------*/
@media (max-width: 1600px)
{
    .faq .accordion-button {font-size: 18px;}
    .faq .accordion-body {font-size: 16px;}
}

@media (max-width: 1440px)
{
    .faq .accordion-button {font-size: 17px;}
    .faq .accordion-body {font-size: 15px;}
}

@media (max-width: 1200px)
{
    .faq .accordion-button {font-size: 16px;}
    .faq .accordion-body {padding: 25px;font-size: 15px}
}

@media (max-width: 1024px)
{
    .page-content.faq {padding: 30px;}
}

@media (max-width: 500px)
{
    .page-content.faq {padding: 20px;}
}

/*---------- PAGES - Blog Page ----------*/
@media (max-width: 1600px)
{
    .blog .blog-content .title {font-size: 20px;}
    .blog .blog-content .text {font-size: 16px;}
    .blog .category .title {font-size: 24px;line-height: 30px;}
    .blog .category .l-item {font-size: 14px;margin: 0 0 10px 0;}
    .blog .category .l-item:last-child {margin: 0 0 20px 0;}
}

@media (max-width: 1200px)
{
    .blog .category {padding: 0 0 0 20px;}
    .blog .category .asd {top: 160px;}
    .blog .blog-content .text {font-size: 15px;}
}
@media (max-width: 1024px)
{
    .blog .category {padding: 50px 12px 0;text-align: center;}
    .blog .category .form {margin: 0 210px 50px;}
}

@media (max-width: 820px)
{
    .blog .category .form {margin: 0 100px 50px;}
}

@media (max-width: 500px)
{
    .blog .blog-content:nth-child(2) {margin: 24px 0 0;}
    .blog .category .form {margin: 0 10px 50px;}
}


/*---------- PAGES - Blog Details Page ----------*/
@media (max-width: 1600px)
{
    .blog .latest-posts .post .title {font-size: 18px;line-height: 22px;}
    .blog .blog-details .text {font-size: 14px;}
}

@media (max-width: 1440px)
{
    .blog .blog-details .date {font-size: 16px;}
    .blog .blog-details .title {font-size: 20px;}
    .blog .blog-details .text {font-size: 14px;}
}

@media (max-width: 1200px)
{
    .blog .latest-posts .post .title {font-size: 16px;line-height: 18px;}
    .blog .blog-details .text {font-size: 15px;}
    .blog .blog-details .date {font-size: 15px;}
}

/*---------- PAGES - Contact Page ----------*/
@media (max-width: 1600px)
{
    .contact-info {padding: 40px;margin-right: 0px;}
    .contact-form .content .pre-title {font-size: 13px;}
    .contact-form .content .title {font-size: 36px;}
    .map-area,
    .map-area iframe{height: 500px;}
}

@media (max-width: 1440px)
{
    .contact-form {padding: 30px;margin-right: 0px;}
    .contact-form .content .pre-title {font-size: 12px;}
    .contact-form .content .title {font-size: 36px;}
    .contact-form .content .form-btn {padding: 12px 36px;font-size: 14px;}
    .contact-info .content .icon i {font-size: 35px;}
    .contact-info .content .title {font-size: 18px;margin: 0 0 5px 0;}
    .contact-info .content .text {font-size: 15x;}
    .map-area,
    .map-area iframe{height: 400px;}
}

@media (max-width: 1200px)
{
    .page-content.contact-page {margin: 50px 4%;}
    .contact-form .content .pre-title {font-size: 10px;}
    .contact-form .content .title {font-size: 26px;}
    .contact-form .content input,
    .contact-form .content textarea {padding: 12px 18px 10px;margin: 0 0 18px 0;}
    .contact-info {padding: 15px;margin-right: 0px;}
    .contact-info .content .icon i {font-size: 25px;}
    .contact-info .content .title {font-size: 16px;margin: 0 0 5px 0;}
    .map-area,
    .map-area iframe{height: 350px;}
}

@media (max-width: 820px)
{
    .page-content.contact-page .row .col-12:first-child {margin-bottom: 50px;}
    .contact-info .content {margin: 10px;}
    .contact-info .content:hover .icon i {background: var(--primary-color);}
}

@media (max-width: 500px)
{
    .contact-info .content .text {font-size: 16px;}
    .contact-form {padding: 15px;text-align: center;}
    .contact-form .content .title {font-size: 24px;}
    .contact-form .content input,
    .contact-form .content textarea {font-size: 13px;}
}