/********** Template CSS **********/
:root {
    --primary: #015FC9;
    --secondary: #0DD3F1;
    --light: #F6F7FC;
    --dark: #15233C;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-outline-primary:hover,
.btn.btn-secondary,
.btn.btn-outline-secondary:hover {
    color: #FFFFFF;
}

.btn.btn-primary:hover {
    background: var(--secondary);
    border-color: var(--secondary);
}

.btn.btn-secondary:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}


/*** Navbar ***/
.navbar.sticky-top {
    top: -100px;
    transition: .5s;
}

.navbar .navbar-brand img {
    max-height: 60px;
}

.navbar .navbar-nav .nav-link {
/*    margin-left: 50px;*/
    padding: 8px 0;
    color: #696E77;
    font-weight: 500;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

@media (max-width: 991.98px) {
    .navbar .navbar-brand img {
        max-height: 45px;
    }

    .navbar .navbar-nav {
        margin-top: 20px;
        margin-bottom: 15px;
    }

    .navbar .nav-item .dropdown-menu {
        padding-left: 30px;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        right: 0;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Header ***/
.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    text-align: start;
    z-index: 1;
}

.carousel-control-prev,
.carousel-control-next {
    width: 7%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    background-color: var(--primary);
    border: 15px solid var(--primary);
    border-radius: 50px;
}

@media (max-width: 768px) {
    #header-carousel .carousel-item {
        position: relative;
        height: 450px;
    }
    
    #header-carousel .carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.page-header {
    background: url(../images/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

.page-header .breadcrumb-item,
.page-header .breadcrumb-item a {
    font-weight: 500;
}

.page-header .breadcrumb-item a,
.page-header .breadcrumb-item+.breadcrumb-item::before {
    color: #696E77;
}

.page-header .breadcrumb-item a:hover,
.page-header .breadcrumb-item.active {
    color: var(--primary);
}


/*** Facts ***/
@media (min-width: 992px) {
    .container.facts {
        max-width: 100% !important;
    }

    .container.facts .facts-text {
        padding-left: calc(((100% - 960px) / 2) + .75rem);
    }

    .container.facts .facts-counter {
        padding-right: calc(((100% - 960px) / 2) + .75rem);
    }
}

@media (min-width: 1200px) {
    .container.facts .facts-text  {
        padding-left: calc(((100% - 1140px) / 2) + .75rem);
    }

    .container.facts .facts-counter  {
        padding-right: calc(((100% - 1140px) / 2) + .75rem);
    }
}

@media (min-width: 1400px) {
    .container.facts .facts-text  {
        padding-left: calc(((100% - 1320px) / 2) + .75rem);
    }

    .container.facts .facts-counter  {
        padding-right: calc(((100% - 1320px) / 2) + .75rem);
    }
}

.container.facts .facts-text {
    background: linear-gradient(rgba(1, 95, 201, .9), rgb(36 66 172)), url(../images/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

.container.facts .facts-counter {
    background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)), url(../images/carousel-2.jpg) center right no-repeat;
    background-size: cover;
}

.container.facts .facts-text .h-100,
.container.facts .facts-counter .h-100 {
    padding: 6rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/*** Service ***/
.service-item {
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 45px rgba(0, 0, 0, .07);
}

.service-item .service-icon {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-item .service-icon img {
    max-width: 60px;
    max-height: 60px;
}

.service-item a.btn {
    color: var(--primary);
}

.service-item a.btn:hover {
    color: #FFFFFF;
    background: var(--primary);
    border-color: var(--primary);
}


/*** Appointment ***/
.appointment {
    background: linear-gradient(rgba(1, 95, 201, .9), rgb(26 53 147)), url(../images/prbg.jpg) center center no-repeat;
    background-size: cover;
}


/*** Team ***/
.team-item {
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 45px rgba(0, 0, 0, .07);
}

.team-item img {
    transition: .5s;
}

.team-item:hover img {
    transform: scale(1.1);
}

.team-text {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -50px;
    opacity: 0;
    transition: .5s;
}

.team-item:hover .team-text {
    bottom: 0;
    opacity: 1;
}

.team-item a.btn {
    color: var(--primary);
}

.team-item a.btn:hover {
    color: #FFFFFF;
    background: var(--primary);
    border-color: var(--primary);
}


/*** Testimonial ***/
.animated.pulse {
    animation-duration: 1.5s;
}

.testimonial-left,
.testimonial-right {
    position: relative;
}

.testimonial-left img,
.testimonial-right img {
    position: absolute;
    padding: 5px;
    border: 1px dashed var(--primary);
    border-radius: 10px;
}

.testimonial-left img:nth-child(1),
.testimonial-right img:nth-child(3) {
    width: 70px;
    height: 70px;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
}

.testimonial-left img:nth-child(2),
.testimonial-right img:nth-child(2) {
    width: 60px;
    height: 60px;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
}

.testimonial-left img:nth-child(3),
.testimonial-right img:nth-child(1) {
    width: 50px;
    height: 50px;
    bottom: 10%;
    right: 10%;
}

/*.testimonial-carousel .owl-item img {
    width: 100px;
    height: 100px;
}*/

.testimonial-carousel .owl-nav {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    margin: 0 5px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: var(--primary);
    border-radius: 10px;
    font-size: 22px;
    transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    background: var(--secondary);
}


/*** Footer ***/
.footer {
    color: #A7A8B4;
}

.footer p a {color: #A7A8B4;}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #A7A8B4;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #A7A8B4;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--light);
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .btn.btn-square {
    color: #A7A8B4;
    border: 1px solid#A7A8B4;
}

.footer .btn.btn-square:hover {
    color: var(--secondary);
    border-color: var(--light);
}

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: var(--secondary);
}

.footer .copyright a:hover {
    color: #FFFFFF;
}


.footer .ip {display: flex; align-items: baseline;}

/*/WebinaTech CSS/*/
.logo {height: 80px; width: 80px; display: flex; align-items: center; grid-gap: 10px; font-size: 30px; line-height: 28px; font-weight: 600; color: #0d2774; position: relative; z-index: 99;}
.logo img {height: 100%; width: 100%; object-fit: contain;}
.logo span {display: grid; grid-gap: 0; padding-top: 8px;}
.logo span small {font-size: 14px;}

.serv_icon {height: 70px; width: 70px; object-fit: contain;}

.blog-item {box-shadow: none; transition: all 0.5s;}
.blog-item .blog-img {height: 250px; width: 100%; background-color: #fff;}
.blog-item .blog-img img {height: 100%; width: 100%; object-fit: contain;}
.blog-item .blog-content {background-color: #f2f5f9; border-top: 1px solid #f2f5f9;}
.blog .blog-item:hover .blog-content {background-color: #fff;}
.blog .blog-item:hover {box-shadow: 0 0 45px rgba(0, 0, 0, .1);}



.btn-primary {color: #fff; background-color: #0d2774; border-color: #0d2774;}
.btn.btn-primary:hover {background: #2a4697; border-color: #2a4697;}



/*/Webina Tech CSS/*/
/*/FONT-SIZE/*/
.fs_10 {font-size: 10px !important;}
.fs_11 {font-size: 11px !important;}
.fs_12 {font-size: 12px !important;}
.fs_13 {font-size: 13px !important;}
.fs_14 {font-size: 14px !important;}
.fs_15 {font-size: 15px !important;}
.fs_16 {font-size: 16px !important;}
.fs_17 {font-size: 17px !important;}
.fs_18 {font-size: 18px !important;}
.fs_19 {font-size: 19px !important;}
.fs_20 {font-size: 20px !important;}
.fs_22 {font-size: 22px !important;}
.fs_24 {font-size: 24px !important;}
.fs_26 {font-size: 26px !important;}
.fs_28 {font-size: 28px !important;}
.fs_30 {font-size: 30px !important;}
.fs_32 {font-size: 32px !important;}
.fs_34 {font-size: 34px !important;}
.fs_36 {font-size: 36px !important;}
.fs_38 {font-size: 38px !important;}
.fs_40 {font-size: 40px !important;}

.fw_400 {font-weight: 400;}
.fw_500 {font-weight: 500;}
.fw_600 {font-weight: 600;}
.fw_700 {font-weight: 700;}
.fw_800 {font-weight: 800;}
.fw_900 {font-weight: 900;}

.clip_1 {-webkit-line-clamp: 1; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}
.clip_2 {-webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}
.clip_3 {-webkit-line-clamp: 3; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}
.clip_4 {-webkit-line-clamp: 4; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}
.clip_5 {-webkit-line-clamp: 5; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}
.clip_6 {-webkit-line-clamp: 6; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}
.clip_8 {-webkit-line-clamp: 8; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box;}



.bg-primary {background-color: #102775 !important;}
.dropdown-item {font-size: 14px; padding: .35rem 1rem;}
.accordion-button {font-size: 16px; background-color: transparent; padding: 0.8rem 1.25rem; color: #333;}
.accordion-item {background-color: #ffffffad; border: none; margin-bottom: 10px; border-radius: 7px;}
.accordion-body {padding: 0 1.25rem 1rem;}
.accordion-button:not(.collapsed) {background-color: transparent; box-shadow: none;}
.accordion-button::after {width: 0.9rem; height: 0.9rem; background-size: 0.9rem;}

.bg_1 {background-image: url(../images/faqs.png); background-size: 25%; background-position: bottom left; background-repeat: no-repeat;}
.bg_2 {background-image: url('../images/bg1.png'), url('../images/bg3.png'); background-position: left top, right; background-repeat: no-repeat; background-size: contain, cover;}
.bg_3 {background-image: url('../images/bg4.png'); background-position: bottom right; background-repeat: no-repeat; background-size: cover;}
.bg_4 {background-color: #fbe9e7; background-image: url('../images/bg2.png'); background-size: cover;}
.bg_5 {background-color: #fbe9e7; background-image: url('../images/success.jpg'); background-size: cover;}

.whatsapp_msg {position: fixed; right: 33px; bottom: 90px; height: 40px; width: 40px; border-radius: 50%; z-index: 999;}
.whatsapp_msg img {height: 100%; width: 100%; object-fit: cover;}

.navbar-nav {grid-gap: 70px; padding: 0 30px;}
.navbar-collapse {flex-grow: inherit; margin: auto; padding-left: 100px;}
.objfcc {object-fit: contain; object-position: center;}
.testimonial .owl-nav {display: none;}
#header-carousel .carousel-item {height: 700px;}
.video-item {width: 100%; height: 200px; overflow: hidden; border-radius: 7px;}
.video-item iframe {width: 100%!important; height: 100%!important; object-fit: cover;}
.curve {position: absolute; top: 5%; right: 10%; animation: tpSwing 2s linear infinite alternate; z-index: -1; width: 100px;}
.curve img {width: 100%;}

.design_process {background-color: #fff; border-radius: 10px; padding: 20px 10px; position: relative; z-index: 9;}
.design_vr {width: 100%; display: flex; align-items: center;}
.design_vr img {width: 90px; object-fit: contain;}
.design_vr div {width: calc(100% - 90px); padding-left: 15px; margin-left: 15px; border-left: 2px solid #ff5722;}
.step_dp {display: inline-block; padding: 3px 15px; font-size: 14px; background-color: #ff5722; color: #fff; border-radius: 5px; width: auto; text-align: center; position: absolute; top: -15px;}

.tp_swing {animation: tpSwing 2s linear infinite alternate;}
.bt_1 {width: 90%;}
.bt_2 {width: 80%;}
.bt_3 {width: 50%;}
.bt_4 {width: 70%;}

.tm_video {width: 100%; position: relative;}
.tm_video img {width: 100%; height: 100%; object-fit: cover;}
.tm_video i {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 9; height: 50px; width: 50px; border-radius: 50%; border: 2px solid #fff; color: #fff; display: grid; align-items: center; justify-content: center; opacity: 0.5; cursor: pointer; transition: all 0.5s;}
.tm_video:hover i {opacity: 1;}
.tm_video i:hover {background-color: #fff; color: #000;}

.testimonial-item {border-radius: 30px; box-shadow: 0px 2px 8px 0px #0000001A; margin: 10px 0;}
.tm_user {display: flex; flex-wrap: wrap; align-items: center; grid-gap: 15px; margin-bottom: 15px;}
.tm_user_img {width: 50px; height: 50px; border-radius: 50%; overflow: hidden;}
.tm_user_img img {width: 100%; height: 100%; object-fit: cover;}
.tm_user_info {width: calc(100% - 70px);}
.rating_stars {display: flex; align-items: center; grid-gap: 6px; font-size: 13px; margin-bottom: 15px; color: #ffbe23;}


/*/Modal/*/
.new_modal {position: fixed; height: 100vh; width: 100%; left: 0; top: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: #0000005c; z-index: 9990; visibility: hidden;}
.new_modal .modal_content {max-height: 100vh; overflow: hidden; overflow-x: hidden; background-color: #fff; border-radius: 3px; transform: scale(0.2); opacity: 0; transition: all 0.5s;}
.modal_open {visibility: visible;}
.modal_open .modal_content {transform: scale(1.0); opacity: 1;}

.new_modal .mw_auto {width: auto;}
.new_modal .mw_320 {min-width: 320px; max-width: 320px;}
.new_modal .mw_400 {min-width: 320px; max-width: 400px;}
.new_modal .mw_500 {min-width: 320px; max-width: 500px;}
.new_modal .mw_600 {min-width: 320px; max-width: 600px;}
.new_modal .mw_700 {min-width: 320px; max-width: 700px;}
.new_modal .mw_1000 {min-width: 320px; max-width: 1000px;}
.new_modal .w_320 {min-width: 320px; width: 320px;}
.new_modal .w_400 {min-width: 320px; width: 400px;}
.new_modal .w_500 {min-width: 320px; width: 500px;}
.new_modal .w_600 {min-width: 320px; width: 600px;}
.new_modal .w_700 {min-width: 320px; width: 700px;}
.new_modal .w_800 {min-width: 320px; width: 800px;}
.new_modal .w_900 {min-width: 320px; width: 900px;}
.new_modal .w_1000 {min-width: 320px; width: 1000px;}
.new_modal .w_fit {min-width: 320px; width: 100%;}
.new_modal .mh_auto {min-height: 100px; height: auto;}
.new_modal .mh_fit {height: 100vh;}

.new_modal .modal_head {display: flex; align-items: center; justify-content: space-between; height: 59px; background-color: #ddd; border-bottom: 1px solid #ddd; padding: 5px 10px;}
.new_modal .modal_head h6, .new_modal .modal_head i {padding: 15px; color: #39363a; font-weight: bold;}
.new_modal .modal_head i {cursor: pointer;}
.new_modal .modal_body {max-height: calc(100vh - 60px); min-height: 100px; padding: 15px 25px; overflow-y: auto;}
.new_modal .mh_fit .modal_body {height: 100vh !important;}
.new_modal .modal_footer {padding: 5px 15px; height: 60px; background-color: #eee; display: flex; align-items: center; justify-content: end; grid-gap: 5px;}


@keyframes tpSwing{
    0% {
        -webkit-transform: rotate(6deg);
        -moz-transform: rotate(6deg);
        -ms-transform: rotate(6deg);
        -o-transform: rotate(6deg);
        transform: rotate(6deg);
    }

    100% {
        -webkit-transform: rotate(-6deg);
        -moz-transform: rotate(-6deg);
        -ms-transform: rotate(-6deg);
        -o-transform: rotate(-6deg);
        transform: rotate(-6deg);
    }
}

body, .container-fluid {overflow-x: hidden !important;}

.bh1 {text-shadow: 1px 1px 5px #fff;}

.banner_other {height: 220px; width: 100%; position: relative; background-color: #000;}
.banner_other img {width: 100%; height: 100%; object-fit: cover; opacity: 0.15;}
.banner_info {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: grid; align-content: center;}

.blog_heading h3 a {color: #000; transition: all 0.5s;}
.blog_content {display: flex; flex-wrap: wrap; align-items: center;}
.blog_content .blog_img {width: 200px; height: 150px; border: 3px solid #ddd; border-radius: 1px;}
.blog_content .blog_img img {height: 100%; width: 100%; object-fit: cover;}
.blog_content .blog_article {width: calc(100% - 206px); padding-left: 15px;}
.blog_content .blog_article p {text-align: justify; font-size: 15px;}

.blog_heading h3:hover a {color: #2a4697;}
.search_blog {width: 100%; display: flex; align-items: center;}
.search_blog input {width: 100%; border: 1px solid #ddd; height: 40px; border-radius: 3px; padding: 5px 10px; font-size: 14px;}
.search_blog button {background-color: #0d2774; font-size: 13px; padding: 5px 15px; border-radius: 3px; color: #fff; height: 40px; border: none;}

.blog_archive {margin-top: 25px;}
.blog_archive h6 {text-transform: uppercase; font-weight: 800; padding-bottom: 7px; display: inline-block; border-bottom: 3px solid #015FC9; position: relative; z-index: 7;}
.blog_archive ul {display: grid; list-style: none; padding: 0; position: relative; top: -9px;}
.blog_archive ul li a {display: block; padding: 7px 0; border-top: 1px solid #ddd; font-size: 14px; color: #333; transition: all 0.5s;}
.blog_archive ul li a:hover {color: #015FC9; padding-left: 7px;}

.bg_map {background-image: url('../images/map.png'); background-size: cover;}
.year_sec {display: flex; align-items: center; min-height: 500px;}
.step_year_odd, .step_year_even {position: relative; font-size: 13px; width: calc(100% / 5);}
.step_year_odd .step_year, .step_year_even .step_year {position: relative;}
.step_year_odd .step_year p {position: absolute; top: 60px; left: 1px;}
.step_year_even .step_year p {position: absolute; bottom: 60px; left: 1px;}
.step_year_odd p, .step_year_even p {padding: 10px 15px; border-left: 2px solid #ddd; margin-bottom: 0;}
.year_number {padding: 2px 20px; font-size: 24px; border-radius: 2px 0 0 2px; display: inline-block; font-weight: 900; color: #fff; background-color: #ddd; position: relative; z-index: 1;}
.year_number:after {content: ""; height: 28px; width: 28px; transform: rotate(45deg) translateY(-50%); position: absolute; right: -4px; top: 39%; z-index: -1; background-color: #ddd;}
.year_number:before {content: ""; height: 1px; width: 170%; left: 100%; top: 50%; transform: translateY(-50%); background-color: #ddd; position: absolute;}

.bg1 .year_number, .bg1 .year_number:after, .bg1 .year_number:before {background-color: #ff7f00;}
.bg1 .step_year p {border-left: 2px solid #ff7f00;}

.bg2 .year_number, .bg2 .year_number:after, .bg2 .year_number:before {background-color: #01cc61;}
.bg2 .step_year p {border-left: 2px solid #01cc61;}

.bg3 .year_number, .bg3 .year_number:after, .bg3 .year_number:before {background-color: #8d45b5;}
.bg3 .step_year p {border-left: 2px solid #8d45b5;}

.bg4 .year_number, .bg4 .year_number:after, .bg4 .year_number:before {background-color: #0781ff;}
.bg4 .step_year p {border-left: 2px solid #0781ff;}

.bg5 .year_number, .bg5 .year_number:after, .bg5 .year_number:before {background-color: #ff380d;}
.bg5 .step_year p {border-left: 2px solid #ff380d;}

.fixed_social {width: 40px; height: auto; position: fixed; left: 0; bottom: 20%; display: grid; list-style: none; margin: 0; padding: 0; z-index: 9999;}
.fixed_social li a span {display: block; width: 40px; height: 40px; display: grid; align-items: center; justify-content: center; color: #fff; background-color: #ddd;}
.fixed_social .fa-facebook-f {background-color: #3c589a;}
.fixed_social .fa-twitter {background-color: #55acee;}
.fixed_social .fa-linkedin-in {background-color: #0077b5;}
.fixed_social .fa-pinterest-p {background-color: #cc2329;}
.fixed_social .fa-whatsapp {background-color: #55eb4c;}

.imgmargin {margin-top: -70px; min-height: 400px;}
.tag {display: flex; flex-wrap: wrap; align-items: center; grid-gap: 6px; margin-top: 7px;}
.tag  span {display: inline-block; padding: 3px 10px; border-radius: 4px; background-color: #e3f2fd; color: #333;}

.dropdown-menu {width: fit-content !important;}
.dropdown-item {padding: .5rem 1rem;}

.blog_grid {overflow-x: hidden;}
.blog_content p {margin-left: 0 !important; margin-right: 0 !important;}

.adv_slide .slick-dots {display: none !important;}

@media only screen and (max-width:992px) {
    .bt_1 {position: absolute; top: 18%; right: 10%; width: 120px; z-index: 9;}
    .bt_2 {position: absolute; top: 34%; left: 10%; width: 120px;}
    .bt_3 {position: absolute; top: 50%; right: 8%; width: 120px; z-index: 9;}
    .bt_4 {position: absolute; top: 72%; left: 14%; width: 120px; z-index: 9;}
    .year_sec {height: auto; display: grid;}
    .step_year_odd, .step_year_even {width: 100%;}
    .step_year_odd p, .step_year_even p {position: inherit !important; top: inherit !important; bottom: inherit !important; left: 35px !important; width: calc(100% - 120px);}
    .step_year_odd .step_year, .step_year_even .step_year {display: flex; align-items: center;}
    .year_number:before {width: 35px;}
    .brdr_btm>.col-12:not(.col-12:last-child) {border-bottom: 1px solid #ccc; padding-bottom: 40px;}
}

@media only screen and (max-width:768px) {
    .pxsm_0 {padding-left: 0; padding-right: 0;}
    .ps_x {padding: 15px 7px !important;}
    .container.facts .facts-text .h-100, .container.facts .facts-counter .h-100 {padding: 2rem 0;}
    .hp_info {padding: 15px; border-radius: 7px; background-color: #ddd; height: 100%;}
    .hp_info h4 {font-size: 24px;}
    .hp_info p {font-size: 16px !important; color: #333 !important; margin-bottom: 0;}
    .bg_c1 {background-color: #c8e6c9;}
    .bg_c2 {background-color: #ffecb3;}
    .bg_c3 {background-color: #fce4ec;}
    .bg_c4 {background-color: #e0f7fa;}
    .navbar-nav {grid-gap: 0;}
    .navbar-collapse {padding-left: 0;}
    .navbar .navbar-nav {margin-top: 10px; margin-bottom: 10px;}
    .carousel-control-prev, .carousel-control-next {display: none;}
    .objfcc {object-fit: contain;}

    .design_process {width: 80%; margin: auto; margin-bottom: 10px;}
    .bt_1 {position: absolute; top: 18%; right: 0%; width: 95px; z-index: 9;}
    .bt_2 {position: absolute; top: 34%; left: 0%; width: 95px; z-index: 9;}
    .bt_3 {position: absolute; top: 50%; right: 0%; width: 95px; z-index: 9;}
    .bt_4 {position: absolute; top: 72%; left: 0%; width: 95px; z-index: 9;}

    /****Modal****/
    .mobile_fix {width: 100% !important; height: 100vh;}
    .mobile_fix .modal_body {height: calc(100vh - 60px); overflow-y: auto;}
    .modal_content {transform: scale(0.78) !important;}
}

@media only screen and (max-width:576px) {
    .logo {height: 65px; width: 65px; font-size: 25px; line-height: 24px;}
    .logo span small {font-size: 12px; font-weight: 500;}
    #header-carousel .carousel-item {height: 250px;}
    #header-carousel .display-6 {font-size: 16px !important; margin-bottom: 10px !important;}
    #header-carousel .display-4 {font-size: 20px !important; margin-bottom: 15px !important;}
    #header-carousel .display-4 + a {padding: 8px 20px !important; font-size: 14px;}
    .design_process {width: 95%;}
    .bt_1 {top: 22%;}
    .bt_3 {top: 51%;}

    .bg_5 {background-image: none; background-color: #efefef;}
    .carousel-control-prev-icon, .carousel-control-next-icon {border: 7px solid var(--primary);}
    .carousel-control-prev span, .carousel-control-next span {width: 30px; height: 30px;}
    .curve {top: -4%; width: 84px; right: 10px;}
    .blog_content .blog_img {width: 135px; height: 100px;}
    .blog_content .blog_article {width: calc(100% - 141px);}
    .blog_content .blog_article p.clip_5 {-webkit-line-clamp: 3; text-align: left; font-size: 14px;}

    .bg_1 {background-size: 32%; background-position: top left;}
    .video-item {height: 240px;}
    .banner_other {height: 175px;}
    .fixed_social {width: 100%; position: sticky; bottom: 0; display: flex;}
    .fixed_social li {width: calc(100% / 5);}
    .fixed_social li a span {width: 100%;}
    .video-item {height: 180px;}
}

@media only screen and (max-width:380px) {
    .blog_heading>a, .blog_heading>small {font-size: 13px;}
    .blog_heading h3 a {font-size: 20px;}
    .blog_content .blog_img {width: 110px; height: 80px; border: 2px solid #ddd;}
    .blog_content .blog_article {width: calc(100% - 114px); padding-left: 10px;}
    .blog_content .blog_article p.clip_5 {font-size: 13px;}
    .blog_article a {font-size: 13px !important;}
    .blog_article a i {font-size: 10px !important;}
    .year_number {font-size: 20px; font-weight: 600;}
    .year_number:after {height: 23px; width: 23px; right: -3px;}
    .step_year_odd p, .step_year_even p {left: 30px !important; width: calc(100% - 100px); padding-right: 0;}
    .year_number:before {width: 30px;}
}