
@media( max-width:1366px){
    .banner-left:before, .banner-right:before{ display: none;}

    .blog-img-cnt .blog-img img{ max-width: 100%;}

    .col75 { max-width: 725px;}
    .col25 { max-width: 340px;}


    #intro .intro-text{ max-width: 1140px; margin: 0 auto;}    
    .create .connect-sec { max-width: 1140px;}
    #intro h2, #intro h1 { font-size: 70px;}
    h2, h1 { font-size: 75px;}
    .see-you-around h2 { font-size: 56px;}
    .what-are-waiting h2 {font-size: 46px;}


	.social-professional .container { padding: 0 60px;}
    .image-with-text.bg1, .image-with-text.bg1.professional{ font-size: 60px; min-height: 730px;}
    .testimonials h2 { font-size: 70px;}
    .first-block h2, .first-block h1{ font-size: 70px;}
    .friends-slider p { font-size: 28px;}												   
}

@media( max-width:1330px){
   /* #intro h2 {font-size: 45px;}
    #intro .intro-text { top: 25%;}*/

    .banner-left { background: url(../img/banner-left.png) left -75px top no-repeat;}
    .banner-right { background: url(../img/banner-right.png) right -75px top no-repeat;}

    .professional-mode .left { background: url(../img/bg-left.png) left -75px top repeat-y;}
    .professional-mode .right { background: url(../img/bg-right.png) right -75px top repeat-y;}

    .social-mode .left { background: url(../img/social-bg-left.png) left -75px top repeat-y;}
    .social-mode .right { background: url(../img/social-bg-right.png) right -75px top repeat-y;}

    h1, h2, h3, h4, h5, h6, .blog-banner h1, .title-text { font-size: 45px;}



    .blog-banner { min-height: 550px;}
    .number { font-size: 130px; line-height: 90px;}
    .blog-details-Desc h2 { font-size: 40px;}
    
    .blog-details-Desc { min-height: 300px;}

    .col75 { max-width: 725px;}
    .col25 { max-width: 340px;}

    .connect-bg, .communicate-bg, .create-bg, .see-you-bg, .waw-bg, .contact-bg{ width: 1140px;}
    .connect-bg h2, .communicate-bg h2, .create-bg h2{ font-size: 70px;}

	.image-with-text.bg1, .image-with-text.bg1.professional{ font-size: 50px;}																		  


}

@media( max-width:1199px){
    #intro h2, #intro h1 {font-size: 65px;}
    #intro .intro-text { top: 20%;}
    .app-details { margin-left: 15%;}
    .professional-mode .left{ padding-right: 8%;}
    .social-mode .app-details { margin-right: 15%;}
    .professional-mode {min-height: 800px;}
    .social-mode { min-height: 800px;}
    .see-you-around {  min-height: 800px;}
    h1, h2, h3, h4, h5, h6, .blog-banner h1, .title-text { font-size: 40px;}
    .what-are-waiting { padding: 50px 0;}



    .blog-details-Desc h2 { font-size: 33px;}
    .blog-cnt { padding: 50px 0;}
    .blog-img-cnt .blog-details { width: 450px;}
    .blog-details-Desc { max-width: 90%;}

    .col75 { max-width: 610px;}
    .col25 { max-width: 286px;}

    .blog-title { font-size: 38px;}


    .intro-img{ width: 350px;}
    .intro-img img{ max-width: 100%;}
    .intro-change-text { min-height: 270px;}
    #intro .intro-text{ max-width: 960px; margin: 0 auto;}    
    .create .connect-sec { max-width: 960px;}

    .connect-bg, .communicate-bg, .create-bg, .see-you-bg, .waw-bg, .contact-bg{ width: 960px;}
    .connect .right { width: 585px;}
    .connect-bg h2, .communicate-bg h2, .create-bg h2 { font-size: 60px;}
    .see-you-around h2 { font-size: 50px;}
    .what-are-waiting h2 { font-size: 40px;}

    .communication-mode .professional-mode p:first-child, .communication-mode .social-mode p:first-child{ padding: 20px;}
    .create .connect-sec .left{ width: 520px;}
    .create .connect-sec .left img{ max-width: 100%;}

    .see-you-around { min-height: 718px;}
    .what-are-waiting { padding: 0;}
    

	.social-professional .container {padding: 0 30px;}
    .first-block img{ max-width: 50%;}
    .first-block h2, .first-block h1 { font-size: 60px;}
    .image-with-text.bg1, .image-with-text.bg1.professional { font-size: 40px; min-height: 600px;}
    .friends-slider h4 { font-size: 40px;}
    .friends-slider p { font-size: 26px;}

    .friends-slider .slick-prev, .friends-slider .slick-next, .friends-embrace.professional .slick-prev, .friends-embrace.professional .slick-next {width: 60px; height: 59px; top: 55%;}
    .friends-slider .slick-next{ left: 80px;}
    .testimonials h2 { font-size: 60px;}
    .testimonial-details .name { font-size: 36px;}
    .friends-slider-items .left-data { padding-right: 5%;}

    .friends-embrace.professional .slick-prev, .friends-embrace.professional .slick-next{ top: 76%;}
    
    .communication-mode .social-mode p:first-child{ padding: 0;}
    .communication-mode .social-mode p:first-child a{ padding: 20px;}
    .communication-mode .professional-mode p:first-child{ padding: 0;}
    .communication-mode .professional-mode p:first-child a{ padding: 20px;}
}

@media( max-width:991px){
    
    .professional-mode .left { background: url(../img/bg-left.png) right -100px top repeat-y; padding-right: 0;}
    .professional-mode .right { background: url(../img/bg-right.png) left -100px top repeat-y;}
    .social-mode .left { background: url(../img/social-bg-left.png) right -100px top repeat-y;}
    .social-mode .right { background: url(../img/social-bg-right.png) left -100px top repeat-y; padding-left: 0;}

    .app-details h2 { padding-left: 10px;}
    .app-details p {  padding-left: 10px;}


    #intro .intro-text { top: 10%;}
     #intro h2, #intro h1 { font-size: 30px; margin-bottom: 10px;}
    #intro .btn-get-started { font-size: 16px;}

    h1, h2, h3, h4, h5, h6, .blog-banner h1, .title-text { font-size: 36px;}
    #contact { background-size: contain;}
    #contact h4{ margin-top: 20px; margin-bottom: 10px;}

    .qr-code .app-btn a { font-size: 16px;}

    .contact-about { max-width: 100%;}
    #contact h4 { font-size: 18px;}
    .copyright{ text-align: center; width: 100%;} 


    .blog-banner { min-height: 400px; align-items: flex-end; flex-direction: row; padding-bottom: 50px;}

    .number { font-size: 100px; line-height: 70px;}
    .blog-img-cnt .blog-details{ padding: 30px;}
    .blog-details-Desc h2 { font-size: 30px;}
    .blog-details-Desc { min-height: 260px; max-width: 100%;}
    .blog-details-footer a { font-size: 14px;}

    .blog-img-cnt .blog-img { width: 470px;}
    .blog-img-cnt .blog-details { width: 300px;}
    .blog-details-Desc h2 { font-size: 26px;}

    .col75 { max-width: 450px;}
    .col25 { max-width: 211px;}
    .col75 .blog-img-cnt .blog-img, .col25 .blog-img-cnt .blog-img{ width: 100%;}

    .blog-details-cnt { padding: 50px;}
    .blog-title { font-size: 32px; padding: 30px;}
    .text-slider{ font-size: 26px;}


    #intro .intro-text { max-width: 720px;}
    .connect-bg, .communicate-bg, .create-bg, .see-you-bg, .waw-bg, .contact-bg { width: 720px;}
    .connect .right { width: 100%;}
    .communication-mode{ flex-direction: column;}
    .mode-img{ margin-bottom: 30px;}
    .communication-mode .social-mode, .communication-mode .professional-mode { max-width: 600px;}

    .create .connect-sec .left { width: 400px; margin: 0 auto; order: 1;}

    .create .connect-sec, .connect-sec{ flex-direction: column;}
    .app-details { margin-left: 0; text-align: center;}
    #intro h2, #intro h1 {font-size: 48px; line-height: 50px;}
    .connect-sec .left{ text-align: center; margin-bottom: 20px;}
    .create .app-details { margin-right: 0;}
    .create .qr-code{ justify-content: center;}
    .create .right { width: 100%; order: 2;}
    .see-you-bg{ min-height: 650px;}
    .waw-bg { padding: 40px 0;}


	.social-professional .container { padding: 0 20px;}
    .first-block h2, .first-block h1 { font-size: 50px; margin-bottom: 0; padding-right: 50px; }
    .first-block .text-block { margin-left: 50px;}
    .image-with-text.bg1, .image-with-text.bg1.professional { font-size: 32px; min-height: 500px; margin-top: 50px;}
    .friends-embrace, .testimonials { padding: 50px 0;}
    .testimonials h2 {font-size: 50px;}

    .friends-slider h4 { font-size: 30px;}
    .friends-slider p { font-size: 20px;}

    .testimonial-img { width: 270px;}
    .testimonial-details { width: 350px;}
    .testimonial-details .name { font-size: 32px; min-height: 60px; padding-left: 80px;}												   
}

 @media( max-width:767px){
    #intro { min-height: 80vh;}
    #intro .btn-get-started { border: 2px solid #fff; }
    .professional-mode img, .social-mode img{ max-width: 100%;}
    h1, h2, h3, h4, h5, h6, .blog-banner h1, .title-text { font-size: 30px;}
    .professional-mode .left { background: url(../img/bg-left.png) right -120px top repeat-y;}
    .professional-mode .right { background: url(../img/bg-right.png) left -120px top repeat-y; }
    .social-mode .left { background: url(../img/social-bg-left.png) right -120px top repeat-y; }
    .social-mode .right { background: url(../img/social-bg-right.png) left -120px top repeat-y;}
    .professional-mode, .social-mode { min-height: 550px;}
    .app-btn { width: 210px;}

    .blog-img-cnt .blog-img { width: 100%;}
    .blog-img-cnt{ flex-direction: column;}
    .blog-img-cnt .blog-details { width: 100%; margin: 0; }

    .blog-type2 .blog-img-cnt div{ width: 100%;}
    .blog-details-Desc { min-height: 100%;}
    
    .blog-type3 { flex-direction: column;}
    .col75 { max-width: 100%; margin-bottom: 50px;}
    .col25 { max-width: 100%;}
    .blog-type3 .blog-details-Desc { min-height: auto;}

    .col25.mt-60{ margin-top: 0; margin-bottom: 50px;}
    .col25.mt-150 { margin-top: 50px;}

    .blog-title {font-size: 26px; padding: 10px 0;}

    .blog-inner .blog-type3 .col25{ margin-bottom: 50px;}
    .blog-details-cnt { padding: 30px 10px;}
    .text-slider { font-size: 24px;}


    #intro .intro-text { max-width: 100%; flex-direction: column;}
    .connect-bg, .communicate-bg, .create-bg, .see-you-bg, .waw-bg, .contact-bg { width: 100%; padding:30px;}
    .intro-img { width: 280px; margin-top: 100px;}
    .intro-title{ order: 2; width: 70%; text-align: center;}
    .intro-change-text { min-height: 150px;}
    #intro h2, #intro h1 { font-size: 40px; line-height: 46px;}
    .communicate .communicate-sec .app-details{ width: 100%;}
    .connect-bg h2, .communicate-bg h2, .create-bg h2 { font-size: 50px;}
    .see-you-around h2 { font-size: 40px;}
    .what-are-waiting h2 { font-size: 30px;}
    #contact h4 { text-align: center;}
    #contact .contact-about p { text-align: center;}

    .app-details p {padding-left: 0;}

	.first-block{ flex-direction: column-reverse;}
    .first-block img { max-width: 70%;}
    .first-block h2, .first-block h1{ padding-right: 0; text-align: center; margin-top: 30px; font-size: 32px;}
    .social-professional-block.two{padding-top: 50px;}

    .social-professional-block.two .first-block{ flex-direction: column;}
    .social-professional-block.two .first-block .text-block{ margin-left: 0; margin-top: 30px; text-align: center;}
    .social-professional-block.two .first-block img{ margin: 0 auto;}

    .image-with-text.bg1, .image-with-text.bg1.professional { font-size: 26px; min-height: 400px;}
    .friends-slider-items .left-data { width: 100%;}
    .friends-slider .slick-prev, .friends-slider .slick-next, .friends-embrace.professional .slick-prev, .friends-embrace.professional .slick-next { width: 30px; height: 29px; top: 70%;}
    .friends-slider h4 { font-size: 26px;}
    .friends-slider p { font-size: 18px;}
    .friends-slider .slick-next {left: 50px;}
    .testimonials h2 { font-size: 40px;}
    .testimonial-items{ flex-direction: column;}
    .testimonial-details { width: 100%;}
    .testimonial-details .name { font-size: 28px; min-height: 40px; padding-left: 0;}

    .friends-embrace.professional .slick-prev, .friends-embrace.professional .slick-next{ top: auto; bottom: -40px;}											  
} 

@media( max-width:575px){

    .container { max-width: 100%;}

    #intro .intro-text { top: auto; bottom: 50px;}
    #intro h2, #intro h1 { text-shadow: 3px 3px 3px #000; color: #fff;}

    .professional-mode, .social-mode{ flex-direction: column;}
    .professional-mode .left, .professional-mode .right, .social-mode .left, .social-mode .right{ width: 100%;}

    .app-details { margin-left: 0; padding: 50px; max-width: 100%;}
    .social-mode .app-details { margin-right: 0;}
    .professional-mode img, .social-mode img { max-width: 60%;}

    .professional-mode .left, .social-mode .right { justify-content: center; padding: 50px;}
    .social-mode .right{ order: 1;}
    .social-mode .left{ order: 2;}

    .qr-code { flex-direction: column;}
    .app-btn { order: 2; margin-top: 15px;}
    .see-you-around { min-height: auto; padding: 50px 0;}

    #contact { text-align: center;}

    .number { font-size: 70px; line-height: 50px;}
    .blog-cnt { padding: 30px 0;}
    .blog-details-Desc h2 { font-size: 24px;}

    .blog-title { font-size: 24px;}



    #intro h2, #intro h1 { font-size: 32px; line-height: 38px;}
    .connect-bg h2, .communicate-bg h2, .create-bg h2 { font-size: 40px;}
    .connect-sec .app-details { padding: 50px 0 0;}
    .mode-img img{ max-width: 100%;}
    .communicate .communicate-sec .app-details{ padding: 0;}
    .create .connect-sec .left { width: 100%;}
    .create .qr-code .app-btn a:first-child { margin-left: 10px;}
    .create .qr-code .app-btn { text-align: center;}
    .see-you-around h2 { font-size: 34px;}
    .see-you-bg { min-height: 520px;}
    .what-are-waiting h2 { line-height: 110%; font-size: 25px;}
    #contact ul{ flex-direction: column; margin-top: 30px;}

	 .first-block h2, .first-block h1 { font-size: 28px;}
    .image-with-text.bg1, .image-with-text.bg1.professional { margin-top: 30px; font-size: 22px; min-height: 350px;}
    .friends-slider-items { flex-direction: column-reverse;}
    .friends-slider-items .left-data { padding-right: 0; text-align: center; padding-top: 30px;}
    .friends-embrace, .testimonials { padding: 50px 0 0; }
    .friends-slider .slick-prev, .friends-slider .slick-next, .friends-embrace.professional .slick-prev, .friends-embrace.professional .slick-next{ top: 50%; background-color: #ffe000;}
    .friends-slider .slick-next { left: auto; right: 0;}

    .testimonials h2 { font-size: 34px;}
    .testimonial-details .name { font-size: 26px;}
    .testimonial-details { padding: 30px;}
}