@media (max-width: 991px) {
    .container{width: 100%; max-width:100%; padding-left: 20px; padding-right: 20px;}
}

@media (min-width: 1350px) {
    .container{width: 100%; max-width:1310px; margin: auto;}
}

body{
    font-family: "Montserrat", sans-serif;
}
a {
    text-decoration: none;
}
p,h1,h2,h3,h4,h5,h6,ul,li,img,a{
    margin: 0;
    padding:0;
}
.my-rectangle {
    stroke: red;
    stroke-width: 2;
}
.regis-button{
    font-size: 20px;
    padding: 12px 25px;
    background-color: #136783;
    border-radius: 100px;
    color: #fff;
    font-weight: 500;
    font-family: "Nunito", sans-serif;
    display: inline-block;
}
.card-btn{
    background-color: #F3DDB5;
    border: 2px solid #FFB840;
    border-radius: 100px;
    padding: 13px 28px;
    box-sizing: border-box;
    font-size: 16px;
    color:#000 !important;
    pointer-events:none;
}
.card-btn img{
    height: 39px;
    width: 39px;
}
.transparent-btn{
    background-color: transparent;
    border: transparent;
}
.blue{
    color: #00607F;
}
.navbar-brand img{
    height: 100%;
    width: 100%;
}
.banner-sec{
    background-image: url('https://www.worldwideassist.net/team-collaboration-app/images/back.png');
    width: 100%;
    background-repeat: no-repeat;
    object-fit: cover;
    background-size: cover;
    background-position: top;
}
.banner-sec2{
    background-image: url('./images/back2.webp');
    height: auto;
    width: 100%;
    background-repeat: no-repeat;
    object-fit: cover;
    background-size: cover;
    background-position: top;
}
.banner-inner{
    max-width: 1140px;
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    text-align: center;
    padding: 80px 0;
}
.banner-inner h1{
    font-size: 70px;
    font-weight: 700;
    color: #000;
    text-align: center;
    line-height: 127.7%;
}
.lines{
    max-width: 430px;
    max-height: 44px;
    height: 100%;
    width: 100%;
}
.banner-inner p{
    color: #000;
    font-size: 16px;
    font-weight: 500;
    line-height: 182.7%;
    width: 950px;
    margin: auto;
}
.banner-inner a {
    color:#00607F;
}
.g-links img{
    height: 100%;
    width: 193px;
}
section.main-video {
    padding-bottom: 200px;
}
.iframe-video {
    width: 100%;
    overflow: hidden;
    margin-left: auto;
    /*pointer-events: none;*/
}
.iframe-video video {
    height: 621px;
}
.video-sec{
    max-width: 1114px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #ECEDEF;
    border-radius: 8px;
    padding: 5px 5px 10px;
}
.video-sec .top-circles{
display: flex;
gap: 10px;
padding: 14px 12px;
}
.top-circles span{
height: 16px;
width: 16px;
border-radius: 50px;
display: block;
border:1px solid #76797B;
}
.section-head{
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
}
.section-head p{
    font-size: 30px;
    font-weight: 600;
    color: #136783;
    line-height: 10px;
}
.section-head h2{
    font-size: 48px;
    font-weight: 700;
    color: #000;
    line-height: 50px;
    text-align: center;
    width: 80%;
    margin: auto;
}
.py-150{
    padding: 80px 0px;
}
.f-flex{
    display: flex;
    align-items: center;
    gap: 90px;
    justify-content: space-between;
}
.f-left{
    width: 49%;
}
.f-right{
    width: 45%;
padding-right: 80px;
position: relative;
}
.f-img img{
    height: 100%;
    width: 100%;
}
.section-head img{
    max-width: 340px;
    max-height: 35px;
    height: 100%;
    width: 100%;
}

.f-text h2{
    font-size: 34px;
    font-weight: 600;
    color: #000;
}
.f-text p{
    font-size: 18px;
    line-height: 35px;
    color: #000;
    font-weight: 500;
    margin: 20px 0px 20px 0px;
}
.feature{
    padding-top: 70px;
}
.pb-200{
    padding-bottom: 200px;
}
.abs-lines{
    height: 150px;
    width: 150px;
    background-position: top right;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    top: -50px;
}
.l-0{
    left: 0;
}
.pr-20{
    padding-right:20px;
}

/* GET-SECTION-CSS-START */
section.get-section {
    padding-bottom: 150px;
}
section.get-section .get-bg {
    background-color: #F6FAFD;
    border-radius: 50px;
    padding: 90px 0;
    position: relative;
}
section.get-section .get-image {
    position: absolute;
    bottom: 60px;
    left: 40px;
}
section.get-section .get-image img {
    width: 37%;
    height: 100%;
}
section.get-section .get-text {
    position: relative;
    z-index: 2;
}
section.get-section .get-text p {
    font-size: 30px;
    font-weight: 600;
    color: #136783;
    line-height: 30px;
    margin-bottom: 20px;
}
section.get-section .get-text h2 {
    font-size: 48px;
    font-weight: 700;
    color: #000;
    line-height: 34px;
    margin-bottom: 18px;
}
section.get-section .get-text .lines img {
    max-width: 346px;
    max-height: 40px;
    height: 100%;
    width: 100%;
    display: block;
}
section.get-section .get-text .get-btns {
    gap: 28px;
    margin-top: 40px;
}
section.get-section .get-text .get-btns button {
    height: fit-content;
}
section.get-section .get-text .get-btns button.card-btn {
    font-size: 14px;
    padding: 11px 20px;
}
section.get-section .get-text .get-btns button.card-btn img {
    height: 28px;
    width: 28px;
}
/* GET-SECTION-CSS-END */

/* FOOTER-CSS-START */
section.footer-section .footer-text .footer-top h2 {
    font-size: 44px;
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    text-transform: capitalize;
    margin-bottom: 0;
    color: #000;
}
section.footer-section .footer-text .footer-top .footer-images img {
    height:100%;
    width: 200px;
}
section.footer-section .footer-text .footer-top .footer-images a:last-child {
    margin-right: 0;
}
section.footer-section .footer-bottom {
    border-top: 1px solid #A6A6A6;
    padding-top: 30px;
    margin-top: 70px;
    padding: 30px 0 25px 0;
}
section.footer-section .footer-bottom p {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
    color: #000000ad;
}
section.footer-section .footer-bottom .footer-links a {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
    color: #000000ad;
    margin-right: 40px;
}
section.footer-section .footer-bottom .footer-links a:last-child {
    margin-right: 0;
}
/* FOOTER-CSS-END */



/*----------------------- MEDIA-QUERIES-START -----------------------*/
@media (min-width: 576px) and (max-width: 767px) {

    /* BANNER-CSS-START */
    .video-sec {max-width: 535px !important;}
    .iframe-video video {height: 295px !important;}
    /* BANNER-CSS-END */
    
    section.get-section .get-text .get-btns button.card-btn {margin-top: 0px !important;}

}

@media (max-width: 767px) {

    /* HEADER-BANNER-CSS-START */
    .navbar-brand img {max-width: 150px;}
    .regis-button {font-size: 14px; padding: 12px 20px;}
    .card-btn {padding: 10px 15px; font-size: 14px;}
    .card-btn img {height: 22px; width: 22px; margin-right: 10px;}
    .banner-sec {margin-top: 50px;}
    .banner-inner {max-width: 100%; padding-left: 20px; padding-right: 20px; padding-top: 50px; padding-bottom:50px;}
    .banner-inner h1 {font-size: 26px;}
    .lines {max-width: 150px; max-height: 19px; margin-top: -15px;}
    .banner-inner p {font-size: 14px; width: 100%;}
    .g-links img {width: 140px;}
    section.main-video {padding-bottom: 150px;}
    .video-sec {max-width: 335px; padding: 5px 5px 10px;}
    .video-sec .top-circles {gap: 6px; padding: 6px 2px;}
    .top-circles span {height: 8px; width: 8px;}
    .iframe-video video {height: 183px;}
    /* HEADER-BANNER-CSS-END */

    /* FEATURE-CSS-START */
    .section-head p {font-size: 18px;}
    .section-head h2 {font-size: 24px; line-height: 32px; width: 100%;}
    .section-head img {max-width: 120px; max-height: 15px; margin-top: -10px;}
    .f-text h2 {font-size: 20px;}
    .f-text p {font-size: 14px; line-height: 28px; margin: 10px 0px 30px 0px;}
    .f-flex {display: grid; gap: 48px;}
    .f-right {width: 100%; padding-right: 0;}
    .f-left {width: 100%;}
    .abs-lines {height: 60px; width: 60px; top: 0px; left:unset !important;}
    .pb-200 {padding-bottom: 150px;}
    .transparent-btn {padding: 12px 10px; font-size: 13px;}
    /* FEATURE-CSS-END */

    /* GET-TOUCH-CSS-START */
    section.get-section {padding-bottom: 100px;}
    section.get-section .get-bg {padding: 40px 20px;}
    section.get-section .get-image {position: unset;}
    section.get-section .get-text p {font-size: 18px; margin-bottom: 10px;}
    section.get-section .get-text h2 {font-size: 28px; line-height: 34px; margin-bottom: 22px;}
    section.get-section .get-text .get-btns button.card-btn img {height: 20px; width: 20px; margin-right: 8px;}
    section.get-section .get-text .get-btns button.card-btn {margin-top: 25px;}
    section.get-section .get-image img {width: 100%; margin-top: 48px; max-width: 400px; margin-left: auto; margin-right: auto; display: block;}
    /* GET-TOUCH-CSS-END */

    /* FOOTER-CSS-START */
    section.footer-section .footer-text {text-align: center;}
    section.footer-section .footer-text .footer-top h2 {font-size: 22px; margin-bottom: 40px;}
    section.footer-section .footer-text .footer-top .footer-images a {margin-right: 5px;}
    section.footer-section .footer-text .footer-top .footer-images img {width: 140px; margin: 0 -4px;}
    section.footer-section .footer-bottom .f-btm-text {flex-direction: column-reverse;}
    section.footer-section .f-btm-text p {margin-top: 25px;}
    section.footer-section .footer-bottom {margin-top: 50px;}
    section.footer-section .footer-bottom .footer-links a, section.footer-section .f-btm-text p {font-size: 14px;}
    /* FOOTER-CSS-END */


    .f-left1 {height: 245px !important; width: 100% !important;}
    .f-img1::before {height: 100% !important; width: 100% !important; left: 0 !important; top: 0 !important;}
    .f-img1 img {width: 100% !important; max-width: 220px !important; height: 125px !important;}
    .f-img1::after {height: 100% !important; width: 100% !important; left: 0 !important; top: 0 !important;}
    .f-img2 img {max-width: 200px !important; margin: -60px 12px 0 0 !important;}
    .f-img img, .user-seg1 img {max-width: 300px; margin: auto; display: block;}

}
@media (min-width: 768px) and (max-width: 991px) {

    /* HEADER-BANNER-CSS-START */
    .regis-button {font-size: 16px;}
    .banner-inner {max-width: 100%; padding-left: 20px; padding-right: 20px;}
    .card-btn {padding: 14px 20px;}
    .card-btn img {height: 30px; width: 30px; margin-right: 10px;}
    .banner-inner h1 {font-size: 42px;}
    .lines {max-width: 274px; max-height: 32px;}
    .banner-inner p {font-size: 14px; width: 700px;}
    .g-links img {width: 160px;}
    section.main-video {padding-bottom: 150px;}
    .video-sec {max-width: 600px; padding: 5px 5px 10px;}
    .iframe-video video {height: 332px;}
    /* HEADER-BANNER-CSS-END */

    /* FEATURE-CSS-START */
    .section-head p {font-size: 22px;}
    .section-head h2 {font-size: 38px;width: 100%;}
    .section-head img {max-width: 220px; max-height: 36px; margin-top: -5px;}
    .section-head {gap: 10px;}
    .f-flex {display: grid; gap: 48px;}
    .f-right {width: 100%; padding-right: 0;}
    .f-left {width: 100%;}
    .f-text h2 {font-size: 28px;}
    .f-text p {font-size: 16px; line-height: 30px; margin: 20px 0px 36px 0px;}
    .abs-lines {height: 100px; width: 100px; top: 0px; left: unset;}
    .usertypes:before {height: 620px !important; width: 15% !important; margin: auto; background-size: cover !important; display: block !important; left: 0; right: 0;}
    /* FEATURE-CSS-END */

    /* GET-TOUCH-CSS-START */
    section.get-section {padding-bottom: 100px;}
    section.get-section .get-bg {padding: 70px 50px;}
    section.get-section .get-image {position: unset;}
    section.get-section .get-text p {font-size: 22px; margin-bottom: 15px;}
    section.get-section .get-text h2 {font-size: 38px; margin-bottom: 12px;}
    section.get-section .get-text .lines img {max-width: 222px; max-height: 26px;}
    section.get-section .get-text .get-btns {margin-top: 30px;}
    section.get-section .get-text .get-btns button.card-btn {padding: 8px 15px;}
    section.get-section .get-image img {width: 100%; margin-top: 48px; max-width: 550px; margin-left: auto; margin-right: auto; display: block;}
    /* GET-TOUCH-CSS-END */

    /* FOOTER-CSS-START */
    section.footer-section .footer-text .footer-top h2 {font-size: 30px;}
    section.footer-section .footer-text .footer-top .footer-images img {width: 140px;}
    section.footer-section .footer-bottom .footer-links a {font-size: 14px;}
    section.footer-section .footer-bottom p {font-size: 14px;}
    /* FOOTER-CSS-END */

    .f-left1 {width: 628px !important; margin: auto;}
    .f-img1 img {width: 390px !important;}
    .f-img img {max-width: 600px; margin: auto; display: block;}
    .user-seg1 img {max-width: 250px; margin: auto; display: block;}


}
@media (min-width: 992px) and (max-width: 1199px) {

    .banner-inner h1 {font-size: 60px;}
    .video-sec {max-width: 850px;}
    .iframe-video video {height: 473px;}
    .section-head h2 {font-size: 42px;}
    .f-text h2 {font-size: 24px;}
    .f-text p {font-size: 16px;}
    .f-left1 {height: 354px !important; width: 530px !important;}
    .f-img1::before {height: 445px !important; width: 450px !important;}
    .f-img1 img {width: 280px !important;}
    .f-img1::after {height: 445px !important; width: 450px !important;}
    .f-right {padding-right: 0;}
    .user-seg1 img {width: 80% !important; margin: auto; display: block;}
    .user-seg1 h2 {font-size: 22px !important;}
    .usertypes:before {height: 790px !important; width: 14% !important; margin: auto; display: block; background-size: cover !important; left: 0; right: 0;}
    .transparent-btn {padding: 13px 0px; margin-top: 15px;}
    section.get-section .get-image img {width: 40%;}
    section.get-section .get-text h2 {font-size: 38px;}
    section.footer-section .footer-text .footer-top h2 {font-size: 34px;}
    section.footer-section .footer-text .footer-top .footer-images img {width: 150px;}

}
@media (min-width: 1200px) and (max-width: 1349px) {
    section.get-section .get-text h2 {font-size: 44px;}
    .usertypes:before {height: 900px !important; width: 14% !important; margin: auto; display: block; background-size: cover !important; left: 0; right: 0;}
    .f-left1 {height: 424px !important; width: 628px !important;}
    .f-img1::before {height: 445px !important; width: 550px !important}
    .f-img1 img {width: 350px !important;}
    .f-img1::after {height: 445px !important; width: 550px !important;}
    .f-right {padding-right: 0;}
}

/*------------second homepage----*/
.usertypes{
    padding-top: 100px;
    max-width: 1180px;
    margin: auto;
    position: relative;
}
.usertypes:before{
    content: "";
    position: absolute;
    background-image: url('./images/userlines.svg');
    height: 1000px;
    width: 100%;
    background-repeat: no-repeat;
    object-fit: cover;
    background-size: contain;
    background-position: top;
}
.user-seg1{
    max-width: 440px;
}
.user-seg1 img{
    height: 100%;
    width: 100%;
}
.user-seg1 h2{
    text-align: center;
font-size: 28px;
color: #000;
margin-bottom: 20px;
font-weight: 600;
}
.mt-80{
    margin-top: 80px;
}
.user-right-img{
    margin-top: 100px;
}
.user-right-img .user-seg1{
    margin-left: auto;
}
@media screen and (max-width:991px){

    .usertypes:before{display: none;}

}
@media screen and (max-width:768px){

    .user-seg1 h2 {
        font-size: 22px;
        margin-bottom: 15px;
    }
}
.f-left1{
    height: 454px;
    width: 648px;
}
.f-img1{
    height: 100%;
    width: 100%;
    position: relative;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
}
.f-img1 img{
    border-radius: 10px;
    width: 400px;
    height: fit-content;   
}
.f-img1::before{
    content: "";
    position: absolute;
    background-image: url(./images/taskback.svg);
    height: 445px;
    width: 610px;
    background-repeat: no-repeat;
    object-fit: cover;
    background-size: contain;
    background-position: top;
    z-index: -1;
    left: 10px;
    top: 16px;
}
.f-img1::after{
    content: "";
    position: absolute;
    background-image: url(./images/taskfront.svg);
    height: 445px;
    width: 610px;
    background-repeat: no-repeat;
    object-fit: cover;
    background-size: contain;
    background-position: top;
    z-index: 1;
    left: 10px;
    top: 16px;
}
.f-left2{
    height: 351px;
    width: 645px;
}
.f-img2::before{
    content: "";
    position: absolute;
    background-image: url(./images/teamback.svg);
    height: 459px;
    width: 639px;
    background-repeat: no-repeat;
    object-fit: cover;
    background-size: contain;
    background-position: top;
    z-index: -1;
    left: 7px;
    top: -2px;
}
.f-img2::after{
    content: "";
    position: absolute;
    background-image: url(./images/teamfront.svg);
    height: 445px;
    width: 610px;
    background-repeat: no-repeat;
    object-fit: cover;
    background-size: contain;
    background-position: top;
    z-index: 1;
    left: 10px;
    top: 16px;
}
.new-bn {
    margin-top: 80px;
}

.new-bn-cn {
    margin-top: 60px;
  margin-bottom: 60px;
}
/* Make the button container a positioning context */
section.get-section .get-btns {
    position: relative;
}

        #emailMenu {
            display: none; 
            border: 1px solid #ccc;
            position: absolute;
            background: white;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            z-index: 10;
            min-width: 200px;
            padding: 0;
            margin: 0;
        }
        .app-option {
            display: flex;
            align-items: center;
            padding: 8px 10px;
            cursor: pointer;
            border-bottom: 1px solid #eee;
            background-color: white;
        }
        .app-option:hover {
            background-color: #f0f0f0;
        }
        .app-icon {
            margin-right: 10px;
            font-size: 1.2em;
            text-decoration: none;
            color: inherit;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .app-option button {
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            text-align: left;
            flex-grow: 1;
            font-size: 1em;
            color: #333;
        }