@charset "utf-8";
/* CSS Document */

.dt-sc-customicon-wrapper { overflow: hidden; padding: 20px; }
.dt-sc-customicon-wrapper .dt-sc-customicon-inner { margin-left: -10px; margin-right: -10px; padding: 7px; position: relative; z-index: 2; 
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;		
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-border-radius: 90px; 
    border-radius: 90px; 
    -webkit-transition: all 0.35s ease 0s;
    transition: all 0.35s ease 0s;
}
.dt-sc-customicon-wrapper.dt-sc-customicon-icon-alignright .dt-sc-customicon-inner { 
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;		
}
.dt-sc-customicon-wrapper .dt-sc-customicon-inner:before { content: ""; height: auto; margin: 0; opacity: 0; position: absolute; bottom: 0; top: 0; width: 90px; -webkit-border-radius: inherit; border-radius: inherit; -webkit-transition: inherit; transition: inherit; }

.dt-sc-customicon-wrapper:not(.dt-sc-customicon-icon-alignright) .dt-sc-customicon-inner:before { left: 0; }
.dt-sc-customicon-wrapper.dt-sc-customicon-icon-alignright .dt-sc-customicon-inner:before { right: 0; }

.dt-sc-customicon-wrapper:hover .dt-sc-customicon-inner:before { opacity: 1; width: calc(100% + 10px); }

.dt-sc-customicon-wrapper:not(.dt-sc-customicon-icon-alignright):hover .dt-sc-customicon-inner:before { margin-right: -10px; }
.dt-sc-customicon-wrapper.dt-sc-customicon-icon-alignright:hover .dt-sc-customicon-inner:before { margin-left: -10px; }	

.dt-sc-customicon-wrapper .dt-sc-customicon-inner .dt-sc-customicon-icon-wrapper:before { content: ""; height: auto; margin: 0; position: absolute; bottom: 0; left: 0; right: 0; top: 0; width: auto; z-index: 0; -webkit-border-radius: 90px; border-radius: 90px; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }	
.dt-sc-customicon-wrapper:hover .dt-sc-customicon-inner .dt-sc-customicon-icon-wrapper:before { -webkit-transform: scale(1); transform: scale(1); }



.dt-sc-customicon-inner .dt-sc-customicon-icon-wrapper { height: 80px; line-height: 80px; min-width: 80px; position: relative; text-align: center; width: 80px; z-index: 0; -webkit-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.04); box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.04); -webkit-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; }
.dt-sc-customicon-inner .dt-sc-customicon-icon-wrapper img { height: 37px; width: auto; position: relative;  }
.dt-sc-customicon-wrapper:hover .dt-sc-customicon-inner .dt-sc-customicon-icon-wrapper img { filter: brightness(0) invert(1); }

.dt-sc-customicon-inner .dt-sc-customicon-title { font-size: 22px; margin: 0; position: relative; -webkit-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; }
.dt-sc-customicon-wrapper:not(.dt-sc-customicon-icon-alignright) .dt-sc-customicon-inner .dt-sc-customicon-title { padding: 0 0 0 35px; }
.dt-sc-customicon-wrapper.dt-sc-customicon-icon-alignright .dt-sc-customicon-inner .dt-sc-customicon-title { padding: 0 35px 0 0; text-align: right; }

.dt-sc-customicon-inner .dt-sc-customicon-icon-wrapper, .dt-sc-customicon-wrapper .dt-sc-customicon-inner:before { background-color: #fff; }


.elementor-widget-dt-customimageswitch:before { content: ""; position: absolute; left: 50%; top: 50%; z-index: 1; -webkit-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 0 100px #fff inset, 0 0 0 50px rgba(255,255,255,0.3), 0 0 0 120px rgba(255,255,255,0.2); box-shadow: 0 0 0 100px #fff inset, 0 0 0 50px rgba(255,255,255,0.3), 0 0 0 120px rgba(255,255,255,0.2); }

.elementor-widget-dt-customimageswitch:before, .elementor-widget-dt-customimageswitch:after { height: auto; padding-top: 135%; left: 50%; top: 55%; width: 135%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

/* pulse wave */
.elementor-widget-dt-customimageswitch:after {
    border: 50px solid #fff;
    content: "";
    opacity: 1;
    margin: auto;
    position: absolute;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;		
    -webkit-animation: pulsate1 2s;
    animation: pulsate1 2s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-direction: forwards;
    animation-direction: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: steps;
    animation-timing-function: steps;
}

@-webkit-keyframes pulsate1 {
    0% {
    opacity: 1;
    box-shadow: inset 0 0 50px 3px rgba(255, 255, 255, 0.75), 0 0 50px 10px rgba(255, 255, 255, 0.75);
    }
    100% {
    opacity: 0;
    padding-top: 225%;
    width: 225%;
    box-shadow: none;
    }
}

@keyframes pulsate1 {
    0% {
    opacity: 1;
    box-shadow: inset 0 0 50px 3px rgba(255, 255, 255, 0.75), 0 0 50px 10px rgba(255, 255, 255, 0.75);
    }
    100% {
    opacity: 0;
    padding-top: 225%;
    width: 225%;		
    box-shadow: none;	
    }
}

.dt-sc-customimageswitch-wrapper { margin-top: -90px; padding: 86px 0; position: relative; }
.dt-sc-customimageswitch-wrapper:before { background-image: url(../images/iphone-bgimage.png); background-repeat: no-repeat; background-position: bottom center; background-size: contain; content: ""; height: auto; margin: 0 -22px; position: absolute; bottom: 0; left: 0; right: 0; top: 0; width: auto; z-index: 2; }

.dt-sc-customimageswitch-wrapper:after { background-image: url(../images/iphone-device-staging-shadow.png); background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; content: ""; height: 22px; position: absolute; bottom: -3px; left: -45px; right: -45px; width: auto; z-index: 1; }

.dt-sc-customimageswitch-wrapper, .dt-sc-customimageswitch-wrapper img { float: left; line-height: 0; width: 100%; }
.dt-sc-customimageswitch-wrapper img { position: relative; z-index: 2; }

/*--------------------------------------------------------------
    DT Responsive
--------------------------------------------------------------*/

    @media only screen and (min-width:1200px) and (max-width:1440px) {

        .dt-sc-customimageswitch-wrapper { padding: 85px 0 75px; }
        .dt-sc-customimageswitch-wrapper:before { margin: 0 -18px; }

    }

	/* Note: Design for a width of 960px */	
    @media only screen and (min-width:992px) and (max-width:1199px) {
		
		.dt-sc-customicon-inner .dt-sc-customicon-title { font-size: 18px; }

		.dt-sc-customicon-wrapper:not(.dt-sc-customicon-icon-alignright) .dt-sc-customicon-inner .dt-sc-customicon-title { padding-left: 25px; }
		.dt-sc-customicon-wrapper.dt-sc-customicon-icon-alignright .dt-sc-customicon-inner .dt-sc-customicon-title { padding-right: 25px; }

		.dt-sc-customimageswitch-wrapper { padding: 62px 0; }
			
    }
    

	 /* Note: Design for a width of 768px */
     @media only screen and (min-width:768px) and (max-width:991px) {

		.dt-sc-customicon-inner .dt-sc-customicon-title { font-size: 16px; }
		.dt-sc-customicon-inner .dt-sc-customicon-icon-wrapper { height: 50px; line-height: 50px; min-width: 50px; width: 50px; }
		.dt-sc-customicon-inner .dt-sc-customicon-icon-wrapper img { height: 24px; }

		.dt-sc-customicon-wrapper:not(.dt-sc-customicon-icon-alignright) .dt-sc-customicon-inner .dt-sc-customicon-title { padding-left: 25px; }
		.dt-sc-customicon-wrapper.dt-sc-customicon-icon-alignright .dt-sc-customicon-inner .dt-sc-customicon-title { padding-right: 25px; }
		
		.dt-sc-customimageswitch-wrapper { padding: 50px 0; }
		.dt-sc-customimageswitch-wrapper:after { left: -30px; right: -30px; }
         
     }

	/*----*****---- << Mobile (Landscape) >> ----*****----*/	
	
	/* Common Styles for the devices below 767px width */
	@media only screen and (max-width: 767px) {

        .elementor-widget-dt-customimageswitch .elementor-widget-container { text-align: center; }
		.dt-sc-customimageswitch-wrapper { display: inline-block; float: none; margin: 0 auto; padding: 85px 0 105px; width: 90%; }
        
    }	

	/* Common Styles for the devices below 479px width */
    @media only screen and (max-width: 479px) {

        .dt-sc-customimageswitch-wrapper { padding: 85px 0 75px; }
		.dt-sc-customicon-inner .dt-sc-customicon-title { font-size: 16px; }
		.dt-sc-customicon-inner .dt-sc-customicon-icon-wrapper { height: 50px; line-height: 50px; min-width: 50px; width: 50px; }
		.dt-sc-customicon-inner .dt-sc-customicon-icon-wrapper img { height: 24px; }

		.dt-sc-customicon-wrapper:not(.dt-sc-customicon-icon-alignright) .dt-sc-customicon-inner .dt-sc-customicon-title { padding-left: 25px; }
		.dt-sc-customicon-wrapper.dt-sc-customicon-icon-alignright .dt-sc-customicon-inner .dt-sc-customicon-title { padding-right: 25px; }

        
    }