/*------------------------------------------------------------------
    Version: 1.0
-------------------------------------------------------------------*/


/*------------------------------------------------------------------
    [Table of contents]

    1. IMPORT FONTS
    2. IMPORT FILES
    3. SKELETON
    4. WP CORE
    5. HEADER
    6. SECTIONS
    7. SECTIONS
    8. PORTFOLIO
    9. TESTIMONIALS
    10. PRICING TABLES
    11. ICON BOXES
    12. MESSAGE BOXES
    13. FEATURES
    14. CONTACT
    15. FOOTER
    16. MISC
    17. BUTTONS
-------------------------------------------------------------------*/


/*------------------------------------------------------------------
    IMPORT FONTS
-------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,900');

/*------------------------------------------------------------------
    IMPORT FILES
-------------------------------------------------------------------*/

@import url(css/animate.css);
@import url(css/flaticon.css);
@import url(css/icomoon.css);
@import url(css/prettyPhoto.css);
@import url(css/owl.carousel.css);
@import url(css/font-awesome.min.css);

/*------------------------------------------------------------------
    SKELETON
-------------------------------------------------------------------*/
html, body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}
.container-fluid {
    max-width: 100%;
    overflow: hidden;
}
.site-footer {
    margin-bottom: 0 !important;
  }
  
  .site-footer .container { /* Or the specific container class you're using */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

body {
    color: #ffffff;
    font-size: 15px;
    font-family: 'Raleway', sans-serif;
    line-height: 1.80857;
    text-align: justify;
    text-justify: inter-word;
    
}
body {
    padding-bottom: 0 !important; /* Override any existing bottom padding */
  }
body.demos .section {
    background: url(images/bg.png) repeat top center #f2f3f5;
}

body.demos .section-title img {
    max-width: 280px;
    display: block;
    margin: 10px auto;
}

body.demos .service-widget h3 {
    border-bottom: 1px solid #ededed;
    font-size: 18px;
    padding: 20px 0;
    background-color: #ffffff;
}

body.demos .service-widget {
    margin: 0 0 30px;
    padding: 30px;
    background-color: #fff
}

body.demos .container-fluid {
    max-width: 1080px
}

a {
    color: #fff7f7;
    text-decoration: none !important;
    outline: none !important;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: 0;
    font-weight: normal;
    position: relative;
    padding: 0 0 10px 0;
    font-weight: normal;
    line-height: 120% !important;
    color: #ffffff;
    margin: 0
}

h1 {
    font-size: 24px
    
}

h2 {
    font-size: 22px
    background: #fff;
}

h3 {
    font-size: 18px
}

h4 {
    font-size: 16px
}

h5 {
    font-size: 14px
}

h6 {
    font-size: 13px
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: #212121;
    text-decoration: none!important;
    opacity: 1
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
    opacity: .8
}

a {
    color: #1f1f1f;
    text-decoration: none;
    outline: none;
}

a,
.btn {
    text-decoration: none !important;
    outline: none !important;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.btn-custom {
    margin-top: 20px;
    background-color: transparent !important;
    border: 2px solid #ddd;
    padding: 12px 40px;
    font-size: 16px;
}

.lead {
    font-size: 18px;
    line-height: 30px;
    color: #ffffff;
    margin: 0;
    padding: 0;
}

blockquote {
    margin: 20px 0 20px;
    padding: 30px;
}

ul, li, ol{
	margin: 0px;
	padding: 0px;
	list-style: none;
}

/*------------------------------------------------------------------
    WP CORE
-------------------------------------------------------------------*/

.first {
    clear: both
}

.last {
    margin-right: 0
}

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float: right;
    margin: 10px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 10px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 10px 0 20px 20px;
}

a img.alignnone {
    margin: 10px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 10px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%;
    /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}


/* Text meant only for screen readers. */

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */
}

/*------------------------------------------------------------------
    Top head
-------------------------------------------------------------------*/

.top-bar{
	background: #000000;
}
.left-top{
	padding: 3px 0px; 
}
.email-box{
	display: inline-block;
	margin-right: 20px;
}
.email-box a{
	color: #ffffff;
	font-size: 16px;
}
.email-box a:hover{
	color: #fd0202;
}
.email-box a i{
	padding: 0px 5px;
}
.phone-box{
	display: inline-block;
}

.phone-box a{
	color: #ffffff;
	font-size: 16px;
}
.phone-box a:hover{
	color: #fd0202;
}
.phone-box a i{
	padding: 0px 5px;
}

.social-box{
	float: right;
}

.social-box ul li{
	display: inline-block;
	padding-left: 10px;
}

.social-box ul li a{
	color: #ffffff;
	font-size: 20px;
}
.social-box ul li a:hover{
	color: #fd0202;
}


/*------------------------------------------------------------------
    HEADER
-------------------------------------------------------------------*/

.megamenu .nav,
.megamenu .collapse,
.megamenu .dropup,
.megamenu .dropdown {
    position: static;
}

.megamenu .container-fluid {
    position: relative;
}

.megamenu .dropdown-menu {
    left: auto;
}

.megamenu .megamenu-content {
    padding: 20px 30px;
}

.megamenu .dropdown.megamenu-fw .dropdown-menu {
    left: 0;
    right: 0;
}

.megamenu .list-unstyled {
    min-width: 200px;
}

.header_style_01 {
    background-color: black;
    transition: background-color 0.3s ease-in-out;
}


.header_style_01 .navbar-default {
    background-color: transparent;
    border: 0;
	border-radius: 0px;
    
}

.header_style_01 .navbar,
.header_style_01 .navbar-nav,
.header_style_01 .navbar-default,
.header_style_01 .nav {
    margin-bottom: 0 !important;
}

.header_style_01 .navbar-brand {
    padding: 2px 15px 0 15px;
	height: auto;
    
}

.header_style_01 .navbar-default .navbar-nav > li > a {
    color: white !important;  /* Force white text */
}

.header_style_01 .navbar-default .navbar-nav > li a {
	color: #000000;
	padding: 15px 15px;
}

.header_style_01 .navbar-default .navbar-nav > li a.active{
	color: #ffffff;
	box-shadow: 0 10px 20px 0 rgba(5, 16, 44, .15);
	border-radius: 25px 0px 25px 0px;
	background: #fd0202;
}

.header_style_01 .navbar-default .navbar-nav > li:hover a,
.header_style_01 .navbar-default .navbar-nav > li:focus a {
    color: #ffffff;
	box-shadow: 0 10px 20px 0 rgba(5, 16, 44, .15);
	border-radius: 25px 0px 25px 0px;
	background: #fd0202;
}

.header_style_01 .navbar-right > li {
    margin-top: 2px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.header_style_01 .navbar-right > li > a {
    padding-bottom: 10px;
    padding-top: 10px;
}

li.social-links {
    margin: 0 8px;
}

li.social-links a {
    padding: 13px 0 !important;
}

.navbar-nav li {
    position: relative;
	margin: 0px 10px;
}

.navbar-nav span {
    font-size: 24px;
    position: absolute;
    right: 2px;
    top: 13px;
}
.header_style_01.scrolled {
    background-color: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.header_style_01.scrolled .navbar-default .navbar-nav > li > a {
    color: black !important;
}
/*------------------------------------------------------------------
    Banner Slider
-------------------------------------------------------------------*/

.slider-bg-one {
    background-image: url("uploads/slider_01.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.slider-bg-two {
    background-image: url("uploads/slider_02.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.slider-bg-three {
    background-image: url("uploads/slider_03.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.slider-content-area {
    height: 100vh;
    position: relative;
}

.home-one-slider-otem .slider-content-area {
    height: 650px;
    position: relative;
}

.slide-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    z-index: 1;
}

.slide-text h1 {
    color: #fff;
    font-size: 70px;
    font-weight: 700;
    text-transform: capitalize;
	text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}

.slide-text h1 span{
	color: #fd0202;
}

.slide-text h2 {
    color: #fff;
    font-size: 22px;
    letter-spacing: 1px;
    margin-bottom: 20px;
	text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}


.slider-wrapper .owl-nav .owl-prev, .slider-wrapper .owl-nav .owl-next {
    background: #393939;
    height: 60px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.4s ease-in-out 0s;
    width: 40px;
	border-radius: 25px 0px 25px 0px;
    margin-top: 100px;
}

.slider-wrapper .owl-nav .owl-prev:hover, .slider-wrapper .owl-nav .owl-next:hover {
	background: #fd0202;
}

.slider-wrapper .owl-nav .owl-prev {
    margin-left: 0%;
	left: 0px;
	position: absolute;
}

.slider-wrapper .owl-nav .owl-prev i{
	position: absolute;
	left: 0px;
	right: 0;
	width: auto;
	height: auto;
	background: none;
	color: #ffffff;
}

.slider-wrapper .owl-nav .owl-next {
    margin-right: 0%;
    right: 0;
	position: absolute;
}

.slider-wrapper .owl-nav .owl-next i{
	position: absolute;
	right: 0;
	left: 0px;
	width: auto;
	height: auto;
	background: none;
	color: #ffffff;
}

.home-one-slider-otem::before{
	content: "";
	position: absolute;
	background: rgba(0,0,0, 0.8);
	width: 100%;
	height: 100%;
	top: 0%;
	left: 100%;
	z-index: 1
}


/*------------------------------------------------------------------
    SECTIONS
-------------------------------------------------------------------*/

.parallax {
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    padding: 120px 0;
    position: relative;
    width: 100%;
}

.parallax.parallax-off {
    background-attachment: scroll !important;
    display: block;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    position: relative;
    background-position: center center;
    vertical-align: sub;
    width: 100%;
    z-index: 2;
}

.no-scroll-xy {
    overflow: hidden !important;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.section {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 10px 0;
padding-bottom: 30px;
display: block;
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  padding-bottom: 30px; /* This is the key line to investigate */
}

.noover {
    overflow: visible;
}

.noover .btn-dark {
    border: 0 !important;
}

.nopad {
    padding: 0;
}

.nopadtop {
    padding-top: 0;
}

.section.wb {
    background-color: #ffffff;
    width: 100%;
}

.section.lb {
    background-color: #ffffff;
}

.section.db {
    background-color: #1f1f1f;
}

.section.color1 {
    background-color: #448AFF;
}

.first-section {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 16em 0 13em;
}

.first-section h2 {
    color: #ffffff;
    font-size: 68px;
    font-weight: 300;
    text-transform: capitalize;
    display: block;
    margin: 0;
    padding: 0 0 30px;
    position: relative;
}

.first-section .lead {
    font-size: 21px;
    font-weight: 300;
    padding: 0 0 40px;
    margin: 0;
    line-height: inherit;
    color: #ffffff;
}

.macbookright {
    width: 980px;
    position: absolute;
    right: -15%;
    bottom: -6%;
}

.section-title {
    display: block;
    position: relative;
    margin-bottom: 60px;
}

.section-title p {
    color: #000000;
    font-weight: 400;
    font-size: 18px;
    line-height: 33px;
    margin: 0;
}

.section-title h3 {
    font-size: 42px;
    font-weight: 500;
    line-height: 62px;
    margin: 0 0 25px;
    padding: 0;
    text-transform: none;
    color: #ffffff;
}

.section.colorsection p,
.section.colorsection h3,
.section.db h3 {
    color: #ffffff;
}

.service-widget{
	background: #ffffff;
}

.section.lb .service-dit h3{
	padding: 12px 0px;
}
.service-dit{
	padding: 20px 15px;
}


/*------------------------------------------------------------------
    PORTFOLIO
-------------------------------------------------------------------*/

.item-h2,
.item-h1 {
    height: 100% !important;
    height: auto !important;
}

.isotope-item {
    z-index: 2;
    padding: 0;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

.isotope,
.isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}

.portfolio-filter ul {
    padding: 0;
    z-index: 2;
    display: block;
    position: relative;
    margin: 0;
}

.portfolio-filter ul li {
    border-radius: 0;
    display: inline-block;
    margin: 0 5px 0 0;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
}

.portfolio-filter ul li:last-child:after {
    content: "";
}

.portfolio-filter ul li .btn-dark {
    box-shadow: none;
    background-color: transparent;
    border: 2px solid #fd0202 !important;
    color: #393939;
    font-weight: 500;
    font-size: 14px;
    padding: 15px 35px;
}

.da-thumbs {
    list-style: none;
    position: relative;
    padding: 0;
}

.da-thumbs .pitem {
    margin: 0;
    padding: 15px;
    position: relative;
}

.da-thumbs .pitem a,
.da-thumbs .pitem a img {
    display: block;
    position: relative;
}

.da-thumbs .pitem a {
    overflow: hidden;
}

.da-thumbs .pitem a div {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
}

.da-thumbs .pitem a div h3 {
    display: block;
    color: #ffffff;
    font-size: 20px;
    padding: 30px 15px;
    text-transform: capitalize;
    font-weight: normal;
}

.da-thumbs .pitem a div h3 small {
    display: block;
    color: #ffffff;
    margin-top: 5px;
    font-size: 13px;
    font-weight: 300;
}

.da-thumbs .pitem a div i {
    background-color: #fd0202;
    position: absolute;
    color: #ffffff !important;
    bottom: 0;
    font-size: 15px;
    z-index: 12;
    right: 0;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
	border-radius: 25px 0px 0px 0px;
}


/*------------------------------------------------------------------
    TESTIMONIALS
-------------------------------------------------------------------*/

.logos img {
    margin: auto;
    display: block;
    text-align: center;
    width: 100%;
    opacity: 0.3;
}

.logos img:hover {
    opacity: 0.5;
}

.desc h3 i {
    color: #fd0202;
    font-size: 37px;
    vertical-align: middle;
    margin-right: 12px;
}

.desc {
    padding: 30px;
    position: relative;
    background: #393939;
    border: 1px solid #393939;
	-webkit-border-radius: 25px 0px 25px 0px;
	-moz-border-radius: 25px 0px 25px 0px;
	border-radius: 25px 0px 25px 0px;
}

.testi-meta {
    display: block;
    margin-top: 20px;
}

.testimonial h4 {
    font-size: 18px;
    color: #ffffff;
    padding: 13px 0 0;
}

.testimonial img {
    max-width: 55px;
}

.testimonial small {
    margin-top: 7px;
    font-size: 16px;
    display: block;
}

.testimonial {
    background-color: transparent;
}

.testimonial h3 {
    padding: 0 0 10px;
    font-size: 20px;
    font-weight: 600;
}

.testimonial small,
.testimonial .lead {
    background-color: transparent;
    color: #aaa;
    display: block;
    font-size: 16px;
    font-style: italic;
    line-height: 30px;
    margin: 0;
    padding: 0;
    position: relative;
}

.testimonial p:after {
    display: none;
}


/*------------------------------------------------------------------
    PRICING TABLES
-------------------------------------------------------------------*/

.pricing-table {
    margin: 50px 0 0 0;
    background: #fff;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1);
}

.pricing-table i {
    width: 30px;
    color: #c2c2c2;
    display: inline-block;
    margin-right: 10px;
    padding-right: 5px;
    border-right: 1px solid #ececec;
}

.pricing-table .btn-dark {
    padding: 10px 24px;
    font-size: 15px;
}

.pricing-table strong {
    font-weight: 600;
    margin-right: 6px;
    color: #1f1f1f;
}

.pricing-table-header {
    padding: 30px 0 25px 0;
    background: #ffffff;
}

.pricing-table-header h2 {
    font-size: 31px;
    margin: 0;
    padding: 0;
    font-weight: 300;
}

.pricing-table-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: #aaaaaa;
    margin-top: 10px;
    text-transform: uppercase;
}

.pricing-table-space {
    height: 10px;
}

.pricing-table-text {
    margin: 15px 30px 0 30px;
    padding: 0 10px 15px 10px;
    border-bottom: 1px solid #ececec;
    font-weight: 300;
    line-height: 30px;
    color: #c2c2c2;
    font-size: 16px;
}

.pricing-table-text p {
    font-weight: 400;
}

.pricing-table-features {
    margin: 15px 30px 0 30px;
    padding: 0 10px 15px 30px;
    border-bottom: 1px solid #ececec;
    text-align: left;
    line-height: 30px;
    font-size: 16px;
    color: #c2c2c2;
}

.pricing-table-highlighted h3,
.pricing-table-highlighted h2 {
    color: #ffffff !important;
}

.pricing-table-sign-up {
    margin-top: 25px;
    padding-bottom: 30px;
}


/* Highlighted table */

.pricing-table-highlighted {
    margin-top: 0;
}

.m130 {
    margin-top: 130px;
}

.nav-pills {
    border: 1px solid #e1e1e1;
}

.nav-pills > li {
    width: 50%;
    padding: 10px;
    float: left;
    margin: 0 !important;
}

.nav-pills > li > a {
    margin: 0!important;
    text-align: center;
    background-color: #f4f4f4;
}


/*------------------------------------------------------------------
    ICON BOXES
-------------------------------------------------------------------*/

.icon-wrapper {
    position: relative;
    cursor: pointer;
    display: block;
    z-index: 1;
}

.icon-wrapper i {
    width: 75px;
    height: 75px;
    text-align: center;
    line-height: 75px;
    font-size: 28px;
    background-color: #f2f3f5;
    color: #1f1f1f;
    margin-top: 0;
}

.small-icons.icon-wrapper:hover i,
.small-icons.icon-wrapper:hover i:hover,
.small-icons.icon-wrapper i {
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    padding: 0 !important;
    color: #e3e3e3 !important;
    background-color: transparent !important;
    background: none !important;
    margin-right: 10px !important;
    vertical-align: middle;
    font-size: 24px !important;
}

.small-icons.icon-wrapper h3 {
    font-size: 18px;
    padding-bottom: 5px;
}

.small-icons.icon-wrapper p {
    padding: 0;
    margin: 0;
}

.icon-wrapper h3 {
    font-size: 21px;
    padding: 0 0 15px;
    margin: 0;
}

.icon-wrapper p {
    margin-bottom: 0;
    padding-left: 95px;
}

.icon-wrapper p small {
    display: block;
    color: #999;
    margin-top: 10px;
    text-transform: none;
    font-weight: 600;
    font-size: 16px;
}

.icon-wrapper p small:after {
    content: "\f105";
    font-family: FontAwesome;
    margin-left: 5px;
    font-size: 11px;
}

.effect-1 {
    display: inline-block;
    cursor: pointer;
    text-align: center;
    position: relative;
    text-decoration: none;
    z-index: 1;
}

.effect-1:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content: '';
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.effect-1 {
    -webkit-transition: background 0.2s, color 0.2s;
    -moz-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
}

.effect-1:after {
    top: -7px;
    left: -7px;
    padding: 7px;
    box-shadow: 0 0 0 2px #fcbf02;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -webkit-transform: scale(.8);
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    transition: transform 0.2s, opacity 0.2s;
    transform: scale(.8);
    opacity: 0;
}

.effect-1:hover:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.effect-1:after {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.effect-1:hover:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}


/*------------------------------------------------------------------
    MESSAGE BOXES
-------------------------------------------------------------------*/

.service-widget h3 {
    font-size: 22px;
    color: #000000;
    padding: 20px 0 12px;
    margin: 0;
	font-weight: 600;
    text-align: center;
}

.service-widget h3 a,
.section.wb .service-widget h3,
.section.lb .service-widget h3 {
    color: #000000;
}

.service-widget p {
    margin-bottom: 0;
    padding-bottom: 0;
   color: #000000;
}

.message-box h4 {
    text-transform: uppercase;
    padding: 0;
    margin: 0 0 5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 15px;
    color: #000000;
}

.message-box h2 {
    font-size: 28px;
    font-weight: 500;
    padding: 0 0 10px;
    margin: 0;
    line-height: 62px;
    margin-top: 0;
    text-transform: none;
    color: #000000;
}

.message-box p {
    margin-bottom: 20px;
    color: #000000;
    padding-right:80px ;
    

}
.message-box p {
    margin-bottom: 20px;
    color: #000000;
    padding-right:80px ;
    

}
.message-boxs p {
    margin-bottom: 20px;
    color: #000000;
    padding-right:20px ;
    padding-left: 80px;
    

}
.message-box .lead {
    padding-top: 10px;
    font-size: 19px;
    font-style: italic;
    color: #000000;
    padding-bottom: 0;
}
/* --- Styles for Phone Screens (using a media query) --- */
/* ... (Your normal screen styles here) ... */

/* --- Styles for Phone Screens --- */
@media screen and (max-width: 600px) {
    .message-box h4 {
      font-size: 13px; /* Smaller size for phone */
      padding-left: 1cm; /* 1cm spacing from left */
      padding-right: 1cm; /* 1cm spacing from right */
      /* Adjust or keep other properties like padding-top/bottom if needed */
    }
  
    .message-box h2 {
      font-size: 22px; /* Smaller size for phone */
      padding-left: 1cm; /* 1cm spacing from left */
      padding-right: 1cm; /* 1cm spacing from right */
      padding-bottom: 8px; /* Keep original bottom padding or adjust */
      padding-top: 0; /* Keep original top padding or adjust */
      line-height: 1.3;
    }
  
    .message-box p {
      padding-left: 1cm; /* 1cm spacing from left */
      padding-right: 1cm; /* 1cm spacing from right */
      margin-bottom: 15px; /* Keep original margin-bottom or adjust */
    }
  
    .message-box .lead {
      font-size: 16px; /* Smaller size for phone */
      padding-left: 1cm; /* 1cm spacing from left */
      padding-right: 1cm; /* 1cm spacing from right */
      padding-top: 8px; /* Keep original top padding or adjust */
      padding-bottom: 0; /* Keep original bottom padding or adjust */
    }
  }
.post-media {
    position: relative;
    margin-left: 100px;
    margin-top: -17px;
}

.post-media img {
    
 
   
    
}

.playbutton {
    position: absolute;
    color: #ffffff !important;
    top: 40%;
    font-size: 60px;
    z-index: 12;
    left: 0;
    right: 0;
    text-align: center;
    margin: -20px auto;
}

.hoverbutton {
    background-color: #fd0202;
    position: absolute;
    color: #ffffff !important;
    top: 48%;
    font-size: 21px;
    z-index: 12;
    left: 0;
    opacity: 0;
    right: 0;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: -20px auto;
}

.service-widget:hover .hoverbutton {
    opacity: 1;
}

hr.hr1 {
    position: relative;
    margin: 60px 0;
    border: 1px dashed #f2f3f5;
}

hr.hr2 {
    position: relative;
    margin: 17px 0;
    border: 1px dashed #f2f3f5;
}

hr.hr3 {
    position: relative;
    margin: 25px 0 30px 0;
    border: 1px dashed #f2f3f5;
}

hr.invis {
    border-color: transparent;
}

hr.invis1 {
    margin: 10px 0;
    border-color: transparent;
}

.section.parallax hr.hr1 {
    border-color: rgba(255, 255, 255, 0.1);
}

.sep1 {
    display: block;
    position: absolute;
    content: '';
    width: 40px;
    height: 40px;
    bottom: -20px;
    left: 50%;
    margin-left: -14px;
    background-color: #ffffff;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 1;
}

.sep2 {
    display: block;
    position: absolute;
    content: '';
    width: 40px;
    height: 40px;
    top: -20px;
    left: 50%;
    margin-left: -14px;
    background-color: #1f1f1f;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 1;
}


/* Divider Styles */

.divider-wrapper {
    width: 100%;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1);
    height: 540px;
    margin: 0 auto;
    position: relative;
}

.divider-wrapper:hover {
    cursor: none;
}

.divider-bar {
    position: absolute;
    width: 10px;
    left: 50%;
    top: -10px;
    bottom: -15px;
}

.code-wrapper {
    border: 1px solid #ffffff;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
    background: url("uploads/code.jpg") no-repeat;
}

.design-wrapper {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
}

.design-image {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: url("uploads/design.jpg") no-repeat;
}


/*------------------------------------------------------------------
    FEATURES
-------------------------------------------------------------------*/

.customwidget h1 {
    font-size: 44px;
    color: #ffffff;
    padding: 15px 0 25px;
    margin: 0;
    line-height: 1 !important;
    font-weight: 500;
}

.customwidget ul {
    padding: 0;
    display: block;
    margin-bottom: 30px;
}

.customwidget li i {
    margin-right: 5px;
}

.customwidget li {
    color: #ffffff;
    margin-right: 10px;
}

.image-center img {
    position: relative;
    margin: 0 0 -208px;
    z-index: 10;
    padding-right: 30px;
    text-align: center;
}

.customwidget p {
    font-style: italic;
    font-size: 18px;
    padding: 0 0 10px;
}

.img-center img {
    width: 100%;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1);
}

.img-center {
    margin: auto;
}

#features li p {
    margin-bottom: 0;
    padding-bottom: 0;
}

#features li {
    display: table;
    width: 100%;
    margin: 64px 0;
    cursor: pointer;
	-webkit-box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
	box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
	background: #393939;
	border-radius: 25px 0px 25px 0px;
	transition: all 1s ease-in-out;
}

#features li:hover {
	transform: scale(1.07);
	transition: all 1s ease-in-out;
	z-index: 1000;
}

.features-left,
.features-right {
    padding: 0 10px;
}

.features-right li:last-child,
.features-left li:last-child {
    margin-bottom: 0px;
    padding-bottom: 0 !important;
}

.features-right li i,
.features-left li i {
    width: 8px;
    height: 68px;
    line-height: 68px;
    display: table;
    border-radius: 25px 0px 25px 0px;
    font-size: 26px;
	color: #ffffff;
    background-color: #fd0202;
    margin: 0 auto 22px;
    position: relative;
    text-align: center;
    z-index: 55;
    transition: .4s;
    padding: 0;
}

.features-right li i:hover,
.features-left li i:hover {
	background: #ff0000;
}

#features i img {
    display: table;
    margin: 0 auto;
}

.features-left li i:before,
.features-right li i:before {
    text-align: center;
}

.features-right li i .ico-current,
.features-left li i .ico-current {
    opacity: 1;
    transition: .4s;
    visibility: visible;
}

.features-right li i .ico-hover,
.features-left li i .ico-hover {
    opacity: 0;
    transition: .4s;
    visibility: hidden;
    top: 19px;
}

.features-right li:hover .ico-current,
.features-left li:hover .ico-current {
    opacity: 0;
    transition: .4s;
    visibility: hidden;
}

.features-right li:hover .ico-hover,
.features-left li:hover .ico-hover {
    opacity: 1;
    transition: .4s;
    visibility: visible;
}

.features-right i {
    float: right;
}

.fr-inner {
    margin-left: 20px;
    margin-right: 20px;
    text-align: justify;
    text-justify: inter-word;
}

.features-left i {
    float: right;
}

.fl-inner {
    text-align: left;
    margin-left: 20px;
    margin-right: 20px;
    text-align: justify;
  text-justify: inter-word;
}

#features h4 {
    text-transform: capitalize;
    margin: 0;
    font-size: 19px;
	color: #ffffff;
}


/*------------------------------------------------------------------
    CONTACT
-------------------------------------------------------------------*/

.bootstrap-select {
    width: 100% \0;
    /*IE9 and below*/
}

.bootstrap-select > .dropdown-toggle {
    width: 100%;
    padding-right: 25px;
}

.has-error .bootstrap-select .dropdown-toggle,
.error .bootstrap-select .dropdown-toggle {
    border-color: #b94a48;
}

.bootstrap-select.fit-width {
    width: auto !important;
}

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: 100%;
}

.bootstrap-select .dropdown-toggle:focus {
    outline: thin dotted #333333 !important;
    outline: 5px auto -webkit-focus-ring-color !important;
    outline-offset: -2px;
}

.bootstrap-select.form-control {
    margin-bottom: 0;
    padding: 0;
    border: none;
}

.bootstrap-select.form-control:not([class*="col-"]) {
    width: 100%;
}

.bootstrap-select.form-control.input-group-btn {
    z-index: auto;
}

.bootstrap-select.btn-group:not(.input-group-btn),
.bootstrap-select.btn-group[class*="col-"] {
    float: none;
    display: inline-block;
    margin-left: 0;
}

.bootstrap-select.btn-group.dropdown-menu-right,
.bootstrap-select.btn-group[class*="col-"].dropdown-menu-right,
.row .bootstrap-select.btn-group[class*="col-"].dropdown-menu-right {
    float: right;
}

.form-inline .bootstrap-select.btn-group,
.form-horizontal .bootstrap-select.btn-group,
.form-group .bootstrap-select.btn-group {
    margin-bottom: 0;
}

.form-group-lg .bootstrap-select.btn-group.form-control,
.form-group-sm .bootstrap-select.btn-group.form-control {
    padding: 0;
}

.form-inline .bootstrap-select.btn-group .form-control {
    width: 100%;
}

.bootstrap-select.btn-group.disabled,
.bootstrap-select.btn-group > .disabled {
    cursor: not-allowed;
}

.bootstrap-select.btn-group.disabled:focus,
.bootstrap-select.btn-group > .disabled:focus {
    outline: none !important;
}

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    text-align: left;
}

.bootstrap-select.btn-group .dropdown-toggle .fa-angle-down {
    position: absolute;
    top: 30% !important;
    right: -5px;
    vertical-align: middle;
}

.bootstrap-select.btn-group[class*="col-"] .dropdown-toggle {
    width: 100%;
}

.bootstrap-select.btn-group .dropdown-menu {
    border: 1px solid #ededed;
    box-shadow: none;
    box-sizing: border-box;
    min-width: 100%;
    padding: 20px 10px;
    z-index: 1035;
}

.dropdown-menu > li > a {
    background-color: transparent !important;
    color: #bcbcbc !important;
    font-size: 15px;
    padding: 10px 20px;
}

.bootstrap-select.btn-group .dropdown-menu.inner {
    position: static;
    float: none;
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.bootstrap-select.btn-group .dropdown-menu li {
    position: relative;
}

.bootstrap-select.btn-group .dropdown-menu li.active small {
    color: #fff;
}

.bootstrap-select.btn-group .dropdown-menu li.disabled a {
    cursor: not-allowed;
}

.bootstrap-select.btn-group .dropdown-menu li a {
    cursor: pointer;
}

.bootstrap-select.btn-group .dropdown-menu li a.opt {
    position: relative;
    padding-left: 2.25em;
}

.bootstrap-select.btn-group .dropdown-menu li a span.check-mark {
    display: none;
}

.bootstrap-select.btn-group .dropdown-menu li a span.text {
    display: inline-block;
}

.bootstrap-select.btn-group .dropdown-menu li small {
    padding-left: 0.5em;
}

.bootstrap-select.btn-group .dropdown-menu .notify {
    position: absolute;
    bottom: 5px;
    width: 96%;
    margin: 0 2%;
    min-height: 26px;
    padding: 3px 5px;
    background: #f5f5f5;
    border: 1px solid #e3e3e3;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    pointer-events: none;
    opacity: 0.9;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.bootstrap-select.btn-group .no-results {
    padding: 3px;
    background: #f5f5f5;
    margin: 0 5px;
    white-space: nowrap;
}

.bootstrap-select.btn-group.fit-width .dropdown-toggle .filter-option {
    position: static;
}

.bootstrap-select.btn-group.fit-width .dropdown-toggle .caret {
    position: static;
    top: auto;
    margin-top: 4px;
}

.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
    position: absolute;
    display: inline-block;
    right: 15px;
    margin-top: 5px;
}

.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
    margin-right: 34px;
}

.bootstrap-select.show-menu-arrow.open > .dropdown-toggle {
    z-index: 1036;
}

.bootstrap-select.show-menu-arrow .dropdown-toggle:before {
    content: '';
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid rgba(204, 204, 204, 0.2);
    position: absolute;
    bottom: -4px;
    left: 9px;
    display: none;
}

.bootstrap-select.show-menu-arrow .dropdown-toggle:after {
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    position: absolute;
    bottom: -4px;
    left: 10px;
    display: none;
}

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:before {
    bottom: auto;
    top: -3px;
    border-top: 7px solid rgba(204, 204, 204, 0.2);
    border-bottom: 0;
}

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:after {
    bottom: auto;
    top: -3px;
    border-top: 6px solid white;
    border-bottom: 0;
}

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:before {
    right: 12px;
    left: auto;
}

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:after {
    right: 13px;
    left: auto;
}

.bootstrap-select.show-menu-arrow.open > .dropdown-toggle:before,
.bootstrap-select.show-menu-arrow.open > .dropdown-toggle:after {
    display: block;
}

.bs-searchbox,
.bs-actionsbox,
.bs-donebutton {
    padding: 4px 8px;
}

.bs-actionsbox {
    float: left;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.bs-actionsbox .btn-group button {
    width: 50%;
}

.bs-donebutton {
    float: left;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.bs-donebutton .btn-group button {
    width: 100%;
}

.bs-searchbox + .bs-actionsbox {
    padding: 0 8px 4px;
}

.bs-searchbox .form-control {
    margin-bottom: 0;
    width: 100%;
}

select.bs-select-hidden,
select.selectpicker {
    display: none !important;
}

select.mobile-device {
    position: absolute !important;
    top: 0;
    left: 0;
    display: block !important;
    width: 100%;
    height: 100% !important;
    opacity: 0;
}


/*# sourceMappingURL=bootstrap-select.css.map */

.bootstrap-select > .btn {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    font-size: 15px;
    height: 33px;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0;
    width: 100%;
    color: #bcbcbc !important;
}

.contact_form {
    border: 1px solid #ededed;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1);
    background-color: #f2f3f5;
    padding: 40px 30px;
}

.contact_form .form-control {
    background-color: #fff;
    margin-bottom: 30px;
    border: 1px solid #ebebeb;
    box-sizing: border-box;
    color: #bcbcbc;
    font-size: 16px;
    outline: 0 none;
    padding: 10px 25px;
    height: 55px;
    resize: none;
    box-shadow: none !important;
    width: 100%;
}

.contact_form textarea {
    color: #bcbcbc;
    padding: 20px 25px !important;
    height: 160px !important;
}

.contact_form .form-control::-webkit-input-placeholder {
    color: #bcbcbc;
}

.contact_form .form-control::-moz-placeholder {
    opacity: 1;
    color: #bcbcbc;
}

.contact_form .form-control::-ms-input-placeholder {
    color: #bcbcbc;
}




/*------------------------------------------------------------------
    FOOTER
-------------------------------------------------------------------*/

.cac {
    background-color: #000000;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.cac:hover a h3 {
    color: #fff !important;
}

.cac a h3 {
    color: #ffffff;
}

.cac h3 {
    padding: 60px 0;
    margin: 0;
    font-weight: 400;
    font-size: 20px;
    text-transform: capitalize;
    line-height: !important;
}

.footer {
    padding: 10px 0;
    background-color: #000000;
    color: #CCCCCC;
    width: 100%;
}

.footer h3 {
    color: #FFFFFF;
    font-size: 18px;
    margin-bottom: 20px;
    align-items:center;
}
.footer p, .footer-links a {
    color: #CCCCCC;
    text-decoration: none;
    display: block;
    font-size: 14px;
    margin-bottom: 8px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

.social-icons {
    display: flex;
    gap: 10px; /* Adjust spacing between icons */
    align-items: center;
    margin-top: 15px;
}

.social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: 1px solid #CCCCCC;
    border-radius: 50%;
    font-size: 18px;
    color: #CCCCCC;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-icons a:hover {
    background-color: #FFFFFF;
    color: #12363F;
}

.footer .widget-title {
    position: relative;
    display: block;
    margin-bottom: 30px;
}

.footer .widget-title small {
    color: #999;
    display: block;
    padding: 0 58px;
    text-transform: uppercase;
}

.footer .widget-title h3 {
    color: #fff;
    font-weight: 500;
    font-size: 21px;
    padding: 0;
    margin: 0;
    line-height: 1 !important;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links a {
    text-decoration: none;
    padding: 2px 5px; /* Reduce padding inside links */
    font-size: 14px; /* Adjust font size if needed */
}

.footer-links.hov a span{
	opacity: 0;
	transition: all 1s ease-in-out;
}

.footer-links.hov a:hover{
	padding-left: 15px;
}
.footer-links.hov a:hover span{
	opacity: 1;
	padding-left: 10px;
	transition: all 1s ease-in-out;
}

.footer-links a:hover,
.footer a:hover {
    color: #ff0000 !important;
}

.footer-links li {
    margin-bottom: 10px;
    display: block;
    width: 100%;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.twitter-widget li {
    margin-bottom: 0;
    border: 0 !important;
}

.twitter-widget li i {
    border-right: 0 !important;
    margin-right: 0;
}

.footer-links li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border: 0;
}

.footer-links i {
    display: inline-block;
    width: 25px;
    margin-right: 10px;
    border-right: 1px dashed rgba(0, 0, 0, 0.1);
}

.copyrights {
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
    background-color: #000000;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    padding: 50px 60px;
    overflow: hidden;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.copyright { /* Replace with your actual class/ID */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

/* Footer left */

.footer-distributed .footer-left {
    float: none;
	text-align: center;
}

.footer-distributed .footer-links {
    margin: 0 0 10px;
    text-transform: uppercase;
    padding: 0;
}

.footer-distributed .footer-links a {
    display: inline-block;
    line-height: 1.8;
    margin: 0 10px 0 10px;
    text-decoration: none;
}

.footer-distributed .footer-company-name {
    font-weight: 300;
    margin: 0 10px;
    color: #666;
    padding: 0;
}

.footer-distributed .footer-company-name a{
	color: #ffffff;
}

.footer-distributed .footer-company-name a:hover{
	color: #fd0202;
}


/* Footer right */

.footer-distributed .footer-right {
    float: none;
}


/* The search form */

.footer-distributed .widget-title p{
	padding-top: 40px;
}

.footer-distributed form {
    position: relative;
}

.footer-distributed form input {
    display: block;
    border-radius: 3px;
    box-sizing: border-box;
    background-color: #181818;
    border: none;
    font: inherit;
    font-size: 15px;
    font-weight: normal;
    color: #999;
    width: 100%;
    padding: 18px 50px 18px 18px;
}

.footer-distributed form input:focus {
    outline: none;
}


/* Changing the placeholder color */

.footer-distributed form input::-webkit-input-placeholder {
    color: #999;
}

.footer-distributed form input::-moz-placeholder {
    opacity: 1;
    color: #999;
}

.footer-distributed form input:-ms-input-placeholder {
    color: #999;
}


/* The magnify glass icon */

.footer-distributed form i {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 16px;
    right: 18px;
    color: #ffffff;
    font-size: 18px;
    margin-top: 6px;
}


/*------------------------------------------------------------------
    MISC
-------------------------------------------------------------------*/

.progress {
    background-color: #f2f3f5;
    border-radius: 0;
    box-shadow: none;
    height: 5px;
    margin-bottom: 20px;
    overflow: hidden;
}

.skills h3 {
    color: #999999;
    font-size: 15px;
}

.dmtop {
    background-color: #3C3D41;
    z-index: 100;
    width: 50px;
    height: 50px;
    line-height: 47px;
    position: fixed;
    bottom: -100px;
    border-radius: 3px;
    right: 20px;
    text-align: center;
    font-size: 28px;
    color: #ffffff !important;
    cursor: pointer;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    -ms-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
}

.dmtop:hover {
	background-color: #fd0202;
}

.icon_wrap {
    background-color: #fd0202;
    width: 100px;
    height: 100px;
    display: block;
    line-height: 100px;
    font-size: 34px;
    color: #ffffff;
    margin: 0 auto;
    text-align: center;
    padding: 0 !important;
    border: 0 !important;
}

.stat-wrap h3 {
    font-size: 22px;
    font-weight: 600;
    color: #fc0202;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important:
}

.stat-wrap p {
    font-size: 38px;
    color: #ffffff;
    margin: 0;
    font-weight: 700;
    padding: 4px 0 0;
    line-height: 1 !important:
}

#preloader {
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fd0202;
    z-index: 11000;
    position: fixed;
    display: block;
	display: flex;
	align-items: center;
	justify-content: center;
}




.loader {
  
  position: absolute;
    margin: 0 auto;
    left: 1%;
    right: 1%;
    top: 45%;
  width: 75px;
  height: 100px;
}
.loader__bar {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 50%;
  background: #fff;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.loader__bar:nth-child(1) {
  left: 0px;
  -webkit-transform: scale(1, 0.2);
          transform: scale(1, 0.2);
  -webkit-animation: barUp1 4s infinite;
          animation: barUp1 4s infinite;
}
.loader__bar:nth-child(2) {
  left: 15px;
  -webkit-transform: scale(1, 0.4);
          transform: scale(1, 0.4);
  -webkit-animation: barUp2 4s infinite;
          animation: barUp2 4s infinite;
}
.loader__bar:nth-child(3) {
  left: 30px;
  -webkit-transform: scale(1, 0.6);
          transform: scale(1, 0.6);
  -webkit-animation: barUp3 4s infinite;
          animation: barUp3 4s infinite;
}
.loader__bar:nth-child(4) {
  left: 45px;
  -webkit-transform: scale(1, 0.8);
          transform: scale(1, 0.8);
  -webkit-animation: barUp4 4s infinite;
          animation: barUp4 4s infinite;
}
.loader__bar:nth-child(5) {
  left: 60px;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-animation: barUp5 4s infinite;
          animation: barUp5 4s infinite;
}
.loader__ball {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-animation: ball 4s infinite;
          animation: ball 4s infinite;
}

@-webkit-keyframes ball {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  5% {
    -webkit-transform: translate(8px, -14px);
            transform: translate(8px, -14px);
  }
  10% {
    -webkit-transform: translate(15px, -10px);
            transform: translate(15px, -10px);
  }
  17% {
    -webkit-transform: translate(23px, -24px);
            transform: translate(23px, -24px);
  }
  20% {
    -webkit-transform: translate(30px, -20px);
            transform: translate(30px, -20px);
  }
  27% {
    -webkit-transform: translate(38px, -34px);
            transform: translate(38px, -34px);
  }
  30% {
    -webkit-transform: translate(45px, -30px);
            transform: translate(45px, -30px);
  }
  37% {
    -webkit-transform: translate(53px, -44px);
            transform: translate(53px, -44px);
  }
  40% {
    -webkit-transform: translate(60px, -40px);
            transform: translate(60px, -40px);
  }
  50% {
    -webkit-transform: translate(60px, 0);
            transform: translate(60px, 0);
  }
  57% {
    -webkit-transform: translate(53px, -14px);
            transform: translate(53px, -14px);
  }
  60% {
    -webkit-transform: translate(45px, -10px);
            transform: translate(45px, -10px);
  }
  67% {
    -webkit-transform: translate(37px, -24px);
            transform: translate(37px, -24px);
  }
  70% {
    -webkit-transform: translate(30px, -20px);
            transform: translate(30px, -20px);
  }
  77% {
    -webkit-transform: translate(22px, -34px);
            transform: translate(22px, -34px);
  }
  80% {
    -webkit-transform: translate(15px, -30px);
            transform: translate(15px, -30px);
  }
  87% {
    -webkit-transform: translate(7px, -44px);
            transform: translate(7px, -44px);
  }
  90% {
    -webkit-transform: translate(0, -40px);
            transform: translate(0, -40px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

@keyframes ball {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  5% {
    -webkit-transform: translate(8px, -14px);
            transform: translate(8px, -14px);
  }
  10% {
    -webkit-transform: translate(15px, -10px);
            transform: translate(15px, -10px);
  }
  17% {
    -webkit-transform: translate(23px, -24px);
            transform: translate(23px, -24px);
  }
  20% {
    -webkit-transform: translate(30px, -20px);
            transform: translate(30px, -20px);
  }
  27% {
    -webkit-transform: translate(38px, -34px);
            transform: translate(38px, -34px);
  }
  30% {
    -webkit-transform: translate(45px, -30px);
            transform: translate(45px, -30px);
  }
  37% {
    -webkit-transform: translate(53px, -44px);
            transform: translate(53px, -44px);
  }
  40% {
    -webkit-transform: translate(60px, -40px);
            transform: translate(60px, -40px);
  }
  50% {
    -webkit-transform: translate(60px, 0);
            transform: translate(60px, 0);
  }
  57% {
    -webkit-transform: translate(53px, -14px);
            transform: translate(53px, -14px);
  }
  60% {
    -webkit-transform: translate(45px, -10px);
            transform: translate(45px, -10px);
  }
  67% {
    -webkit-transform: translate(37px, -24px);
            transform: translate(37px, -24px);
  }
  70% {
    -webkit-transform: translate(30px, -20px);
            transform: translate(30px, -20px);
  }
  77% {
    -webkit-transform: translate(22px, -34px);
            transform: translate(22px, -34px);
  }
  80% {
    -webkit-transform: translate(15px, -30px);
            transform: translate(15px, -30px);
  }
  87% {
    -webkit-transform: translate(7px, -44px);
            transform: translate(7px, -44px);
  }
  90% {
    -webkit-transform: translate(0, -40px);
            transform: translate(0, -40px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@-webkit-keyframes barUp1 {
  0% {
    -webkit-transform: scale(1, 0.2);
            transform: scale(1, 0.2);
  }
  40% {
    -webkit-transform: scale(1, 0.2);
            transform: scale(1, 0.2);
  }
  50% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  90% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(1, 0.2);
            transform: scale(1, 0.2);
  }
}
@keyframes barUp1 {
  0% {
    -webkit-transform: scale(1, 0.2);
            transform: scale(1, 0.2);
  }
  40% {
    -webkit-transform: scale(1, 0.2);
            transform: scale(1, 0.2);
  }
  50% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  90% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(1, 0.2);
            transform: scale(1, 0.2);
  }
}
@-webkit-keyframes barUp2 {
  0% {
    -webkit-transform: scale(1, 0.4);
            transform: scale(1, 0.4);
  }
  40% {
    -webkit-transform: scale(1, 0.4);
            transform: scale(1, 0.4);
  }
  50% {
    -webkit-transform: scale(1, 0.8);
            transform: scale(1, 0.8);
  }
  90% {
    -webkit-transform: scale(1, 0.8);
            transform: scale(1, 0.8);
  }
  100% {
    -webkit-transform: scale(1, 0.4);
            transform: scale(1, 0.4);
  }
}
@keyframes barUp2 {
  0% {
    -webkit-transform: scale(1, 0.4);
            transform: scale(1, 0.4);
  }
  40% {
    -webkit-transform: scale(1, 0.4);
            transform: scale(1, 0.4);
  }
  50% {
    -webkit-transform: scale(1, 0.8);
            transform: scale(1, 0.8);
  }
  90% {
    -webkit-transform: scale(1, 0.8);
            transform: scale(1, 0.8);
  }
  100% {
    -webkit-transform: scale(1, 0.4);
            transform: scale(1, 0.4);
  }
}
@-webkit-keyframes barUp3 {
  0% {
    -webkit-transform: scale(1, 0.6);
            transform: scale(1, 0.6);
  }
  100% {
    -webkit-transform: scale(1, 0.6);
            transform: scale(1, 0.6);
  }
}
@keyframes barUp3 {
  0% {
    -webkit-transform: scale(1, 0.6);
            transform: scale(1, 0.6);
  }
  100% {
    -webkit-transform: scale(1, 0.6);
            transform: scale(1, 0.6);
  }
}
@-webkit-keyframes barUp4 {
  0% {
    -webkit-transform: scale(1, 0.8);
            transform: scale(1, 0.8);
  }
  40% {
    -webkit-transform: scale(1, 0.8);
            transform: scale(1, 0.8);
  }
  50% {
    -webkit-transform: scale(1, 0.4);
            transform: scale(1, 0.4);
  }
  90% {
    -webkit-transform: scale(1, 0.4);
            transform: scale(1, 0.4);
  }
  100% {
    -webkit-transform: scale(1, 0.8);
            transform: scale(1, 0.8);
  }
}
@keyframes barUp4 {
  0% {
    -webkit-transform: scale(1, 0.8);
            transform: scale(1, 0.8);
  }
  40% {
    -webkit-transform: scale(1, 0.8);
            transform: scale(1, 0.8);
  }
  50% {
    -webkit-transform: scale(1, 0.4);
            transform: scale(1, 0.4);
  }
  90% {
    -webkit-transform: scale(1, 0.4);
            transform: scale(1, 0.4);
  }
  100% {
    -webkit-transform: scale(1, 0.8);
            transform: scale(1, 0.8);
  }
}
@-webkit-keyframes barUp5 {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  40% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1, 0.2);
            transform: scale(1, 0.2);
  }
  90% {
    -webkit-transform: scale(1, 0.2);
            transform: scale(1, 0.2);
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@keyframes barUp5 {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  40% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1, 0.2);
            transform: scale(1, 0.2);
  }
  90% {
    -webkit-transform: scale(1, 0.2);
            transform: scale(1, 0.2);
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}



/*------------------------------------------------------------------
    BUTTONS
-------------------------------------------------------------------*/

.navbar-default .btn-light {
    padding: 0 20px;
    margin-left: 15px;
}

.nav-pills,
.effect-1:after,
.nav-pills > li > a,
.global-radius,
.btn-brd {
    -webkit-border-radius: 25px 0px 25px 0px;
    -moz-border-radius: 25px 0px 25px 0px;
    border-radius: 25px 0px 25px 0px;
}

.btn-light {
    padding: 13px 40px;
    font-size: 18px;
    border: 2px solid #fd0202;
    color: #ffffff;
    background-color: #fd0202;
}

.btn-dark {
    padding: 13px 40px;
    font-size: 18px;
    border: 1px solid #ececec !important;
    color: #1f1f1f;
    background-color: transparent;
}

.btn-light:hover,
.btn-light:focus {
    border-color: #fd0202;
    color: rgba(255, 255, 255);
	background: #393939;
}


/*------------------------------------------------------------------
    inner Page CSS
-------------------------------------------------------------------*/

.fixed-menu .navbar-default{
	position: fixed;
	visibility: hidden;
	left: 0px;
	top: 0px;
	width: 100%;
	padding: 0px 0px;
	background: #ffffff;
	z-index: 0;
	transition: all 1s ease-in-out;
	z-index: 999;
	opacity: 1;
	visibility: visible;
	-ms-animation-name: fadeInDown;
	-moz-animation-name: fadeInDown;
	-op-animation-name: fadeInDown;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	-ms-animation-duration: 500ms;
	-moz-animation-duration: 500ms;
	-op-animation-duration: 500ms;
	-webkit-animation-duration: 500ms;
	animation-duration: 500ms;
	-ms-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-op-animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-ms-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-op-animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}

.fixed-menu .navbar-default {
    padding: 15px 0px;
    box-shadow: 0 0 8px 0 rgba(0,0,0,.12);
}


.banner-bg-1{
	/* background: url(uploads/inner-bg.jpg);
    opacity: 30%; */
	padding: 120px 0;	
	background-clip: initial;
	background-color: #000000;
	background-origin: initial;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	z-index: 0;
}

.banner-bg-1::before{
	content: "";
	display: inline-block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
	background: rgba(0, 0, 0, 0.4);
}

.banner{
	position: relative;
}

.banner h2{
	color: #ffffff;
	font-size: 45px;
	font-weight: 700;
	letter-spacing: 1px;
	margin-left: 20px;
	position: relative;
}
.banner h2::after {
    background: #fd0202;
    content: "";
    height: 35px;
    left: -15px;
    position: absolute;
    top: 8px;
    width: 6px;
}

.page-title-link li{
	display: inline-block;
	position: relative;
}
.page-title-link li a {
    color: #fff;
    font-size: 14px;
    letter-spacing: 1px;
    margin: 0 15px;
    text-transform: uppercase;
	font-weight: 500;
}
.page-title-link li a:hover {
	color: #fd0202;
}
.page-title-link li::after {
    background: #fc0202;
    bottom: 8px;
    content: "";
    height: 2px;
    margin-left: -1px;
    position: absolute;
    width: 10px;
}
.page-title-link li:last-child::after {
    content: "";
    width: 0;
    height: 0;
}


.about-item{
	background: #ffffff;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	padding-bottom: 10px;
	transition: all 1s ease-in-out;
	margin-bottom: 30px;
    border-radius: 15px;
}
.about-icon{
	padding: 20px 0px;
	transition: all 1s ease-in-out;
}
.about-icon span{
	font-size: 48px;
	color: #393939;
}

.about-text h3{
	font-size: 22px;
	font-weight: 600;
	padding: 10px 0px;
}
.about-text h3 a{
	color: #393939;
}
.about-text h3 a:hover{
	color: #fd0202;
}

.about-item:hover .about-icon{
	transform: rotate(-360deg);
	transition: all 1s ease-in-out;
}

.about-item:hover .about-icon span{
	color: #fd0202;
	transition: all 1s ease-in-out;
}



.portfolio-filter ul li .btn-dark.active{
	background: #fc0202;
	color: #ffffff;
}


#test-box .testimonial h3{
	color: #ffffff;
}

#test-box .testimonial h4{
	color: #393939;
}


:root{
    --pricingTable-yellow: #fd0202;
    --pricingTable-purple: #fd0202;
    --pricingTable-blue: #fd0202;
}

.pricingTable{
    padding-bottom: 10px;
    background: #fff;
    border-bottom: 15px solid var(--pricingTable-yellow);
    text-align: center;
    overflow: hidden;
    position: relative;
	transition: all 0.3s ease-in-out;
}
.pricingTable:hover{
	cursor: pointer;
	box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.1);
	transform: scale(1.04);
}
.pricingTable:before{
    content: "";
    width: 100%;
    height: 350px;
    background: var(--pricingTable-yellow);
    position: absolute;
    top: -150px;
    left: 0;
    transform: skewY(-20deg);
}
.pricingTable .pricingTable-header{
    padding: 20px 20px 60px;
    text-align: left;
    position: relative;
}
.pricingTable .title{
    font-size: 30px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    margin: 0;
}
.pricingTable .sub-title{
    display: block;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
}
.pricingTable .year{
    width: 80px;
    height: 55px;
    background: #fff;
    padding: 7px 0;
    font-size: 15px;
    font-weight: 600;
    font-style: normal;
	line-height: 20px;
    color: var(--pricingTable-yellow);
    text-align: center;
    position: absolute;
    top: 30px;
    right: 20px;
    z-index: 1;
}
.pricingTable .year:before,
.pricingTable .year:after{
    content: "";
    width: 57px;
    height: 57px;
    background: #fff;
    position: absolute;
    top: -28px;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%) scaleY(0.5) rotate(45deg);
}
.pricingTable .year:after{
    top: auto;
    bottom: -28px;
}
.pricingTable .price-value{
    display: inline-block;
    width: 170px;
    height: 110px;
    padding: 15px;
    border: 2px solid var(--pricingTable-yellow);
    border-top: none;
    border-bottom: none;
    position: relative;
}
.pricingTable .price-value:before,
.pricingTable .price-value:after{
    content: "";
    width: 121px;
    height: 121px;
    border: 3px solid var(--pricingTable-yellow);
    border-right: none;
    border-bottom: none;
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%) scaleY(0.5) rotate(45deg);
}
.pricingTable .price-value:after{
    border-top: none;
    border-left: none;
    border-bottom: 3px solid var(--pricingTable-yellow);
    border-right: 3px solid var(--pricingTable-yellow);
    top: auto;
    bottom: -60px;
}
.pricingTable .value{
    width: 100%;
    height: 100%;
    background: #fff;
    border: 2px solid var(--pricingTable-yellow);
    border-top: none;
    border-bottom: none;
    color: var(--pricingTable-yellow);
    z-index: 1;
    position: relative;
}
.pricingTable .value:before,
.pricingTable .value:after{
    content: "";
    width: 97px;
    height: 97px;
    background: #fff;
    border: 3px solid var(--pricingTable-yellow);
    border-bottom: none;
    border-right: none;
    position: absolute;
    top: -48px;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%) scaleY(0.5) rotate(45deg);
}
.pricingTable .value:after{
    border-right: 3px solid var(--pricingTable-yellow);
    border-bottom: 3px solid var(--pricingTable-yellow);
    border-top: none;
    border-left: none;
    top: auto;
    bottom: -48px;
}
.pricingTable .currency{
    display: inline-block;
    font-size: 30px;
    margin-top: 2px;
    vertical-align: top;
}
.pricingTable .amount{
    display: inline-block;
    font-size: 30px;
    font-weight: 600;
    line-height: 65px;
}
.pricingTable .amount span{
    display: inline-block;
    font-size: 0px;
    font-weight: normal;
    vertical-align: top;
    margin-top: -30px;
}
.pricingTable .month{
    display: block;
    font-size: 16px;
    line-height: 0;
}
.pricingTable .pricing-content{
    padding: 50px 0 0 80px;
    margin-bottom: 20px;
    list-style: none;
    text-align: left;
    transition: all 0.3s ease 0s;
}
.pricingTable .pricing-content li{
    padding: 7px 0;
    font-size: 16px;
    color: #808080;
    position: relative;
}
.pricingTable .pricing-content li:before,
.pricingTable .pricing-content li.disable:before{
    content: "\e963";
    font-family: 'IcoMoon-Free';
    font-weight: 900;
    width: 25px;
    height: 25px;
    line-height: 25px;
    border-radius: 50%;
    background: #98c458;
    text-align: center;
    color: #fff;
    position: absolute;
    left: -50px;
}
.pricingTable .pricing-content li.disable:before{
    content: "\e95f";
    background: #fe6c6c;
}
.pricingTable .pricingTable-signup{
    display: inline-block;
	padding: 0px 20px;
    height: 50px;
    line-height: 50px;
    font-size: 22px;
    font-weight: 700;
    color: var(--pricingTable-yellow);
    text-transform: capitalize;
    border: 2px solid var(--pricingTable-yellow);
    margin: 0 auto 10px;
    position: relative;
    transition: all 0.3s ease 0s;
}
.pricingTable .pricingTable-signup:hover{
    background: var(--pricingTable-yellow);
    color: #fff;
}
.pricingTable.purple{ border-bottom-color: var(--pricingTable-purple); }
.pricingTable.purple:before{ background: var(--pricingTable-purple); }
.pricingTable.purple .year{ color: var(--pricingTable-purple); }
.pricingTable.purple .price-value{
    border-left-color: var(--pricingTable-purple);
    border-right-color: var(--pricingTable-purple);
}
.pricingTable.purple .price-value:before{
    border-left-color: var(--pricingTable-purple);
    border-top-color: var(--pricingTable-purple);
}
.pricingTable.purple .price-value:after{
    border-right-color: var(--pricingTable-purple);
    border-bottom-color: var(--pricingTable-purple);
}
.pricingTable.purple .value{
    border-left-color: var(--pricingTable-purple);
    border-right-color: var(--pricingTable-purple);
    color: var(--pricingTable-purple);
}
.pricingTable.purple .value:before{
    border-left-color: var(--pricingTable-purple);
    border-top-color: var(--pricingTable-purple);
}
.pricingTable.purple .value:after{
    border-right-color: var(--pricingTable-purple);
    border-bottom-color: var(--pricingTable-purple);
}
.pricingTable.purple .pricingTable-signup{
    color: var(--pricingTable-purple);
    border-color: var(--pricingTable-purple);
}
.pricingTable.purple .pricingTable-signup:hover{
    color: #fff;
    background: var(--pricingTable-purple);
}
.pricingTable.blue{ border-bottom-color: var(--pricingTable-blue); }
.pricingTable.blue:before{ background: var(--pricingTable-blue); }
.pricingTable.blue .year{ color: var(--pricingTable-blue); }
.pricingTable.blue .price-value{
    border-left-color: var(--pricingTable-blue);
    border-right-color: var(--pricingTable-blue);
}
.pricingTable.blue .price-value:before{
    border-left-color: var(--pricingTable-blue);
    border-top-color: var(--pricingTable-blue);
}
.pricingTable.blue .price-value:after{
    border-right-color: var(--pricingTable-blue);
    border-bottom-color: var(--pricingTable-blue);
}
.pricingTable.blue .value{
    border-left-color: var(--pricingTable-blue);
    border-right-color: var(--pricingTable-blue);
    color: var(--pricingTable-blue);
}
.pricingTable.blue .value:before{
    border-left-color: var(--pricingTable-blue);
    border-top-color: var(--pricingTable-blue);
}
.pricingTable.blue .value:after{
    border-right-color: var(--pricingTable-blue);
    border-bottom-color: var(--pricingTable-blue);
}
.pricingTable.blue .pricingTable-signup{
    color: var(--pricingTable-blue);
    border-color: var(--pricingTable-blue);
}
.pricingTable.blue .pricingTable-signup:hover{
    color: #fff;
    background: var(--pricingTable-blue);
}
@media only screen and (max-width: 990px){
    .pricingTable{ margin-bottom: 30px; }
}
@media only screen and (max-width: 767px){
    .pricingTable:before{ transform: skewY(-15deg); }
    .pricingTable .title{ font-size: 22px; }
}




.pd-add{
	padding: 70px 0px;
}
.address-item{
    background-color: #ffffff;
	float: left;
	margin: 0 11px;
	padding: 0px 15px;
	width: 31%;
	box-shadow: 0 5px 14px rgba(255, 255, 255, 0.1);
    margin-top: -50px; /* Adjust value as needed */
    border-radius: 20px;
    color: #000;
}

.address-icon{
	padding: 15px 0px;
}
.address-icon i{
	font-size: 38px;
	color: #ff0000;
}

.address-item h3{
	font-size: 28px;
	font-weight: 600;
	color: #fd0202;
}


.dmtop.show {
    bottom: 20px;
}
.client-section {
    background: #fff;
    padding: 20px 0;
    text-align: center;
}

.client-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.client-wrapper img {
    height: 80px;
    max-width: 200px;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.8);
    animation: fadeInScale 1.5s ease-in-out forwards;
}

.client-wrapper img:nth-child(1) { animation-delay: 0.2s; }
.client-wrapper img:nth-child(2) { animation-delay: 0.4s; }
.client-wrapper img:nth-child(3) { animation-delay: 0.6s; }
.client-wrapper img:nth-child(4) { animation-delay: 0.8s; }
.client-wrapper img:nth-child(5) { animation-delay: 1s; }
.client-wrapper img:nth-child(6) { animation-delay: 1.2s; }
.client-wrapper img:nth-child(7) { animation-delay: 1.4s; }
.client-wrapper img:nth-child(8) { animation-delay: 1.6s; }

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.trusted-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    padding: 50px;
    background-color: #fff;
    text-align: center;
}

.trusted-text {
    width: 30%;
    font-size: 22px;
    font-weight: bold;
    color: #333;
}
.trusted-text h2 {
    color: #000000; /* Dark Gray for visibility */
    font-size: 30px;
    font-weight: normal;
    margin: 0;
}
.trusted-text h3 {
    color: #324a5e; /* Dark Gray for visibility */
    font-size: 40px;
    font-weight: bold;
    margin: 0;
}

.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Responsive grid */
    gap: 50px;
    width: 60%;
    justify-content: center;
    align-items: center;
}

.logo-grid img {
    max-width: 100%;  /* Make logos smaller */
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease-in-out;
}

.logo-grid img:hover {
    transform: scale(1.1); /* Slight zoom effect on hover */
}
@media (max-width: 768px) {
    .trusted-text h2 {
        font-size: 22px; /* Adjust font size */
    }

    .trusted-text h3 {
        font-size: 18px; /* Adjust font size */
    }

    .logo-grid {
        grid-template-columns: repeat(2, 1fr); /* Show two logos per row */
    }
}
/* General Styles */
.main-wrapper {
    font-family: Arial, sans-serif;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    
}

/* Centered Mission & Vision Wrapper */
/* Centered Mission & Vision Wrapper */
.mission-vision-wrapper {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px;
    flex-wrap: nowrap; /* Prevent wrapping on large screens */
    background-color: white;
    padding-left: 140px;  
    padding-right: 140px;  /* Default padding for PC */
}

/* Individual Card Styling */
.mv-card {
    flex: 1; /* Distributes equal width on PC */
    max-width: 300px;
    min-height: 200px;
    color: #ffffff;
    background-color: #000000;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid #ddd;
}

/* ✅ Fix Mobile View: Stack Boxes Vertically */
@media (max-width: 768px) {
    .mission-vision-wrapper {
        flex-direction: column !important; /* Force vertical stacking */
        align-items: center; /* Center align */
        justify-content: flex-start; /* Align from top */
        padding: 50px 20px !important; /* Different padding for mobile */
    }

    .mv-card {
        width: 90% !important; /* Ensure full width */
        max-width: 100% !important; /* Prevent constraints */
        
    }
}


/* Icons */
.mv-card i {
    font-size: 30px;
    color: #ff0000;
    margin-bottom: 5px;
}


/* Animations */
@keyframes fadeInBounce {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    }
    100% {
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
    }
}
/* Media query for mobile screens */

.mission-vision-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 100px;
    opacity: 0;  /* Hidden initially */
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}



.mv-card h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.mv-card i {
    font-size: 40px;
    color: rgb(255, 0, 0);
    margin-bottom: 10px;
}

.mv-card:hover {
    
    transform: scale(0.95); /* Slight zoom-out effect */
}

.unique-heading {
    color: #ffffff; /* Custom color */
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
}

.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.header-container {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Moves content to the left */
}

.map-container {
    margin-right: 20px; /* Space between map and text */
}

iframe {
    border-radius: 10px;
    width: 250px; /* Smaller width */
    height: 200px; /* Smaller height */
}
bold {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #ffffff;
}
.structure {
    position: relative;
    text-align: center;
}
.box {
    display: inline-block;
    padding: 10px 20px;
    background: #000;
    color: white;
    border-radius: 10px;
    margin: 20px;
    position: relative;
}
.line {
    position: absolute;
    width: 2px;
    background: black;
    height: 50px;
    left: 50%;
    transform: translateX(-50%);
    animation: grow 1s ease-in-out forwards;
}
.horizontal {
    width: 100px;
    height: 2px;
    background: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: growWidth 1s ease-in-out forwards;
}
@keyframes grow {
    from { height: 0; }
    to { height: 50px; }
}
@keyframes growWidth {
    from { width: 0; }
    to { width: 100px; }
}


.text-container {
    font-size: 4rem;
    font-family: 'Brush Script MT', cursive;
    color: #333;
    animation: fadeIn 2s ease-in-out infinite alternate;
}
@keyframes fadeIn {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}
.chatbot {
    width: 100px;
    height: 100px;
    background: #4CAF50;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.eyes {
    display: flex;
    gap: 10px;
}
.eye {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    animation: blink 3s infinite;
}
@keyframes blink {
    0%, 90% { height: 10px; }
    95% { height: 3px; }
    100% { height: 10px; }
}
.message {
    position: absolute;
    bottom: -20px;
    background: white;
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 10px;
    animation: typing 2s infinite;
}
@keyframes typing {
    0%, 100% { content: 'Typing'; }
    33% { content: 'Typing.'; }
    66% { content: 'Typing..'; }
    90% { content: 'Typing...'; }
}
#unique-service-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 90px 90px;
    background-color: #ffffff;
    
}
/* --- Styles for Phone Screens (using a media query) --- */
@media screen and (max-width: 600px) {
    #unique-service-block {
        width: 100%;
        padding: 8px 8px;
        background-color: #ffffff;
    }
  }
  .unique-service-items {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 50px;
    margin: 0 auto;
    background-color: #ffffff;
    width: 100%;
}
/* Ensuring alternate layouts */
.unique-service-item:nth-child(odd) {
    flex-direction: row; /* Text on right, Image on left */
}

.unique-service-item:nth-child(even) {
    flex-direction: row-reverse; /* Text on left, Image on right */
}
.unique-service-items:nth-child(odd) {
    flex-direction: row; /* Text on right, Image on left */
}

.unique-service-items:nth-child(even) {
    flex-direction: row-reverse; /* Text on left, Image on right */
}
.unique-service-text, .unique-service-image {
    flex: 1;
    padding-left: 50px;
    padding-right: 50px;

}

.unique-service-text {
    font-size: 20px;
    font-weight: bold;
    color: #c73434;
    text-align: justify;
    margin-top: 1px;
    padding-right: 80px;
    padding-left: 80px;
}
.unique-service-image img {
    width: 100%;
    max-width: 400px;
    border-radius: 10px;
  /*   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); */
}

.right-align {
    text-align: right;
}

.left-align {
    text-align: left;
}

/* --- Your existing CSS for Larger Screens --- */
/* ... (keep all your desktop styles here) ... */


/* --- Mobile Responsiveness --- */
@media (max-width: 768px) { /* Using 768px breakpoint */

    /* ... (Keep the general mobile styles for .unique-service-items, .unique-service-text, etc.) ... */

    /* Adjust padding and flex direction for the main container of each service block */
    .unique-service-items {
        display: flex !important;
        flex-direction: column !important; /* Stack items vertically on mobile */
        padding-left: 20px !important; /* Re-apply original left padding */
        padding-right: 50px !important; /* Re-apply original right padding */
        align-items: center !important; /* Center items in the column */
        justify-content: center !important; /* Center items in the column */
        background-color: #ffffff;
    }

    /* Adjust flex items (image and text containers) */
    .unique-service-text,
    .unique-service-image {
        flex: 0 0 auto !important;
        width: 100% !important; /* Ensure they take full width in the column */
        padding: 0 !important; /* Remove default 50px padding */
        margin: 0 !important; /* Remove any default margins */
    }

    /* Style the image container to place it first and center contents */
    .unique-service-image {
        order: -1 !important; /* Place the image container before the text container (above) */
        margin-bottom: 20px !important; /* Add space below the image */
        text-align: center !important; /* Center any inline/inline-block children */
    }

    /* Style the text container - Keep justify and 80px padding */
    .unique-service-text {
        order: 0 !important; /* Ensure text container is after image (default order) */
        text-align: justify !important; /* Keep/re-apply justified text */
        padding-left: 50px !important; /* Re-apply original left padding */
        padding-right: 0px !important; /* Re-apply original right padding */
        margin-top: 0 !important; /* Reset margin-top */
        margin-bottom: 0 !important; /* Reset margin-bottom */
    }

    /* Style for ALL images (except the first one will be overridden) */
    .unique-service-image img {
        /* Make the image bigger (relative to container) and centered */
        width: 80% !important; /* Take 80% of its container's width */
        max-width: 350px !important; /* Allow up to 350px width (or 400px) */
        display: block !important; /* Important for margin auto */
        margin-left: auto !important; /* Center the image block horizontally */
        margin-right: auto !important; /* Center the image block horizontally */
        height: auto !important; /* Maintain aspect ratio for *other* images */
    }

    /* --- Specific styles for the image in the FIRST service block --- */
    .unique-service-items:first-of-type .unique-service-image img {
        width: 5cm !important; /* Set width to 5cm */
        height: 5cm !important; /* Set height to 5cm */
        max-width: 5cm !important; /* Ensure max-width doesn't prevent 5cm */
        display: block !important; /* Ensure it's a block element for margin auto */
        margin: auto !important; /* Center the image */
        /* Optional: Add object-fit if you want to control how the image fits the 5x5 box */
        /* object-fit: cover !important; */ /* Fills the box, may crop */
        /* object-fit: contain !important; */ /* Fits inside the box, no distortion */
    }
    /* --- End of Specific styles for the first image --- */


     /* Ensure alignment classes don't interfere on mobile text */
     .right-align,
     .left-align {
        /* Do NOT force center. Let justify text apply. */
     }

    /* Explicitly set paragraph text to justify */
     .unique-service-text p {
        text-align: justify !important;
     }

     /* Explicitly set headings inside the text block to justify */
     .unique-service-text h3 {
         text-align: justify !important;
     }

    /* Center the button if needed */
    .unique-service-text .button {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 15px !important;
    }

}

/* --- Mobile Styles for #unique-service-block (from your code) --- */

.background-container {
    position: relative;
    width: 100%;
    height: 600px; /* Adjust based on your image size */
    background: url('uploads/TQIUR.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.text-box {
    position: absolute;
    width: 30%;
    background: rgba(255, 255, 255, 0.8);
    padding: 10px;
    text-align: center;
    border-radius: 8px;
    font-size: 26px;
}
.text-box h2 {
    font-size: 28px;
    color: black;
}
.text-box p {
    font-size: 20px;
    color: #333;
}
/* Positioning for each text box */
.box1 { top: 10%; left: 10%; }
.box2 { top: 10%; right: 10%; }
.box3 { top: 50%; left: 10%; }
.box4 {top: 50%; bottom: 10%; right: 10%; }
.timeline-container {
    width: 80%;
    max-width: 900px;
    margin: 50px auto;
    position: relative;
    background-color: #ffffff;
    color: #000;
}

.timeline-container::before {
    content: "";
    position: absolute;
    left: 50%;
    width: 5px;
    background-color: #000000;
    height: 90%;
    transform: translateX(-50%);
    top: 0;
}

/* Milestone Styling */
.milestone {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
}

/* Content of Milestones */
.milestone .content {
    width: 45%;
    background: rgb(250, 248, 248);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
}

.milestone .content h2 {
    margin-top: 0;
    color: #000000;
}

/* Milestone Circle Styling */
.milestone .circle {
    width: 20px;
    height: 20px;
    background-color: #ff0404;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -10px; /* Place circle at the top center of the box */
    margin-top: 0;
}

/* Alternate Left & Right */
.milestone:nth-child(even) {
    flex-direction: row-reverse;
}

/* Mobile View - Size Reduction and Alignment Fix */
@media screen and (max-width: 768px) {
    .timeline-container {
        width: 100%;
        padding: 0 20px;
        transform: scale(0.75); /* Scale down the entire container for mobile */
        transform-origin: top center;
    }

    .timeline-container::before {
        height: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 3px; /* Reduced width for mobile */
    }

    .milestone {
        flex-direction: column;
        align-items: center;
        position: relative;
    }

    .milestone .content {
        width: 90%; /* Adjust content width to fit within the screen */
        padding: 12px;
        transform: scale(0.9); /* Further reduce size of content for mobile */
    }

    .milestone .circle {
        width: 16px;
        height: 16px;
        top: -8px; /* Circle aligned to the top of the content */
    }
}

/* Style for the mess-box */
/* General Box Styling */
.mess-box { 
    background: #ffffff;
    border-radius: 15px;
    padding-left: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transform: scale(0.98);
    opacity: 0;
    animation: slideIn 1s ease-out forwards;
    transition: transform 0.3s, box-shadow 0.3s;
    width: 450px;
    height: 350px;
    margin-left: 150px;

}

/* Animation for sliding the box in */
@keyframes slideIn {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Styling for h2 */
.mess-box h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: fadeInText 1s ease-out forwards;
}

/* Animation for fade-in text */
@keyframes fadeInText {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Styling for p elements */
.mess-box p {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 10px;
    animation: fadeInText 1.2s ease-out forwards;
    animation-delay: 0.2s;
}

/* Hover effect for the mess-box */
.mess-box:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* Black Box Styling */
.black-box {
    background: #000000;
    border-radius: 15px;
    padding-left: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transform: scale(0.98);
    opacity: 0;
    animation: slideIn 1s ease-out forwards;
    transition: transform 0.3s, box-shadow 0.3s;
    width: 450px;
    height: 350px;
    margin-right: 100px;
    margin-bottom: 5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mess-box,
    .black-box {
        padding: 15px;
        width: 90%; /* Set width to 90% for mobile view */
        height: auto; /* Adjust height for smaller content */
        margin-left: 5%;  /* Center the boxes with 5% margin from left */
        margin-right: 5%; /* Center the boxes with 5% margin from right */
        margin-bottom: 20px; /* Space between boxes */
        margin-top: -150px;
    }

    .mess-box h2,
    .black-box h2 {
        font-size: 20px;
    }

    .mess-box p,
    .black-box p {
        font-size: 14px;
    }

    /* Stack the boxes vertically in mobile view */
    .rows {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .mess-box {
        margin-bottom: 200px; /* Add margin to create space between the two boxes */
    }
}

/* Remove wide space before Strength text */
/* ✅ Mobile-Specific Initial Styles */
@media (max-width: 768px) {
    .header_style_01 {
        background-color: black !important; /* Force black background on mobile */
    }

    .header_style_01 .nav > li > a {
        color: white !important; /* Force white text */
    }

    .navbar-toggle .icon-bar {
        background-color: white !important; /* White menu bars */
    }

    /* ✅ Mobile-Specific Scroll Behavior */
    .header_style_01.scrolled {
        background-color: white !important;
    }

    .header_style_01.scrolled .nav > li > a {
        color: black !important;
    }

    .header_style_01.scrolled .navbar-toggle .icon-bar {
        background-color: black !important;
    }
}
.contact-details-grid {
  max-width: 768px; /* Adjust as needed */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr; /* Single column for small screens */
  gap: 24px; /* Adjust spacing between items */
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 768px) {
  .contact-details-grid {
    grid-template-columns: repeat(3, 1fr); /* Three columns for medium and large screens */
  }
}

.contact-item {
  text-align: center;
}

.contact-icon-container {
  margin: 0 auto;
  background-color: #fca5a5; /* Example red color */
  color: white;
  border-radius: 9999px; /* Full circle */
  height: 80px; /* Adjust icon container size */
  width: 80px; /* Adjust icon container size */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.contact-icon {
  width: 40px; /* Adjust icon size */
  height: 40px; /* Adjust icon size */
}

.contact-title {
  font-size: 1.25rem; /* text-xl */
  font-weight: 600; /* font-semibold */
  color: #2d3748; /* text-gray-800 */
  margin-bottom: 8px;
}

.contact-text {
  font-size: 1rem; /* text-lg */
  color: #4a5568; /* text-gray-700 */
  margin-bottom: 4px;
}

/* Specific icon container colors */
.headquarters-icon {
  background-color: #fca5a5; /* red-500 */
}

.email-icon {
  background-color: #60a5fa; /* blue-500 */
}

.call-us-icon {
  background-color: #86efac; /* green-500 */
}

/* Larger font size for the whole block */
.contact-details-block {
  font-size: 1.1em; /* Adjust as needed for overall size */
}

/* Style for the phone icon */
.call-us-phone-icon {
  width: 24px; /* Adjust icon size */
  height: 24px; /* Adjust icon size */
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
}
.contact-info-block {
    font-size: 2.15em; /* Adjust overall font size */
    max-width: 768px; /* Adjust as needed */
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .contact-info-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column for small screens */
    gap: 32px; /* Adjust spacing between items */
  }
  
  @media (min-width: 768px) {
    .contact-info-grid {
      grid-template-columns: repeat(3, 1fr); /* Three columns for medium and large screens */
    }
  }
  
  .contact-info-item {
    text-align: center;
  }
  
  .contact-info-icon {
    margin: 0 auto;
    background-color: #e5e7eb; /* Light gray background for icons */
    color: #374151; /* Dark gray icon color */
    border-radius: 50%; /* Circular shape */
    height: 90px; /* Adjust icon container size */
    width: 90px; /* Adjust icon container size */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
  
  .contact-info-svg {
    width: 40px; /* Adjust icon size */
    height: 40px; /* Adjust icon size */
  }
  
  .headquarters .contact-info-icon {
    background-color: #f87171; /* Red for headquarters */
    color: #fff;
  }
  
  .email-us .contact-info-icon {
    background-color: #3b82f6; /* Blue for email */
    color: #fff;
  }
  
  .call-us .contact-info-icon {
    background-color: #10b981; /* Green for call us */
    color: #fff;
  }
  
  .contact-info-title {
    font-size: 1.5rem; /* Larger title */
    font-weight: 700; /* Bold title */
    color: #1e293b; /* Darker text color */
    margin-bottom: 12px;
  }
  
  .contact-info-text {
    font-size: 1.4rem; /* Slightly larger text */
    color: #4b5563; /* Medium gray text color */
    margin-bottom: 8px;
  }
  
  .contact-info-phone-icon {
    width: 20px; /* Adjust phone icon size */
    height: 20px; /* Adjust phone icon size */
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.75rem;
  }
  /* --- Keep your existing styles for larger screens --- */
/* These likely include Bootstrap's col-md-6, post-media, img-responsive, img-rounded */

/* --- Styles for Phone Screens (using a media query) --- */
@media screen and (max-width: 600px) {
    /* Target the image specifically within the relevant structure */
    .col-md-6 .post-media img {
      /* Ensure the image is a block element for margin: auto to work */
      /* Bootstrap's img-responsive already does this (display: block) */
      display: block;
  
      /* Ensure it doesn't exceed its container's width */
      /* Bootstrap's img-responsive already does this (max-width: 100%) */
      
  width: 300px;
      /* Center the block element horizontally */
    margin-right: 300px;
      padding-right: 50px;
      padding-left: 10px;
      /* Add some vertical margin above/below if needed for spacing */
      /* margin-top: 20px; */
      /* margin-bottom: 20px; */
    }
  
    /* Optional: Adjust padding on the post-media div if needed */
    /* For example, if the post-media div itself had padding pushing the image */
     .col-md-6 .post-media {
         padding: 0; /* Remove or reduce any padding on the container */
     }
  }