*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --green-color:#27ad5f;
    --white-color:#ffffff;
    --black-color:#000000;
    --red-color:#cc3366;
    --gray-color:#879396;
}



/* google fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

html{
    scroll-behavior: smooth;
}
body{
    font-family: "Roboto", sans-serif;
}
a{
    text-decoration: none;
    /* color: #000; */
}
.containers{
    margin: 0px 80px !important;
}

.top-header-section{
    padding: 10px 0;
    background: #27ad5f;
}
.top-header-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.left-section a,.right-section a{
    color: var(--white-color);
}
.left-section,.right-section{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

/* main-header-section */
.main-header-section{
    height: 100px;
    margin: 20px 0;
    border-bottom: 1px solid  #87939677;
}
.main-header-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo img{
    width: 180px ;
}

/* social logo */
.socail-logo , .socail-logo a,.menu a{
  font-weight: 700;
  color: var(--gray-color);
  font-size: 22px;
}



/* index page main section */
.main-section{
    padding: 0 100px;
}
.job-box{
    padding: 40px 40px;
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25)
     0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    transition: all .3s ease;
}

 .flex-content{
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 20px;
 }

.job-title{
 font-size: 24px;
 font-weight: 700;
 color: var(--black-color);
}
.job-box:hover{
    box-shadow: rgba(0, 0, 0, 0.164) 0px 54px 55px, rgba(0, 0, 0, 0.12)
     0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.11) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    scale: 1.01;

}
.para-text{
    color: var(--gray-color);
    font-weight: 600;
    font-size: 18px;
    margin-top: 10px;
}
.green-text{
    color: var(--green-color) !important;
    font-weight: 600;
}

.small-text{
    color: var(--gray-color);
    font-weight: 700;
    font-size: 16px;
}
.job-text{
    font-size: 22px !important;
}
/* ============================ambassador page============================== */
.job-detail-section{
    width: 65%;
}
.more-job-box{
   background-color: var(--white-color);
   width: 500px;
}

.bottom-border{
border-bottom: 1px solid var(--green-color);
margin: 20px 0;

}

.icons{
    color: var(--green-color);
}
.job-details-content{
    display: flex;
    gap: 20px;
}



/*============================= footer ==================================*/
footer{
    background: var(--black-color);
    padding: 100px 0 0px 0;
    
}
.footer-content{
    color: var(--white-color);
    text-align: center;
    align-items: start !important;
    display: flex;
    justify-content: space-between;
}
.footer-text{
    font-size: 1.2rem !important;
    font-weight: 300;
    color: #fff;
    margin-top: 2.4rem;
    text-align: start !important;
}

.footer-content a{
    text-decoration: none;
}
.footer-logo{
    width: 30%;
    margin-top: 30px;
}
.footer-socail-logo a{
    font-size: 1.5rem;
    color: var(--white-color);
}
.footer-link-content{
    margin-top: 30px;
    display: flex;
    gap: 80px;
    width: 30%;
    text-align: start !important;
}
.link-header{
    border-bottom: 2px solid var(--green-color);
    margin-bottom: 2.4rem;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.8;
    font-weight: 700;
    font-size: 1.3rem;
    padding-bottom: 10px;
}
.footer-link{
    font-size: 1.2rem;
    color: var(--white-color);
}
.stay-connected-content{
    margin-top: 30px;
    width: 300px;
    text-align: start !important;
}
input{
    width: 300px;
    padding: 10px;
    border: 0;
    outline: 0;
    margin-bottom: 15px;
    font-size: 1.2rem;
}
.submit-btn{
    width: 300px;
    padding: 10px;
    border: 0;
    outline: 0;
    margin-bottom: 10px;
    font-size: 1.2rem;
    background: var(--gray-color);
    color: var(--white-color);
    font-weight: 700;
    border-radius: 0 !important;
}
.red-border{
    border-top: 1px solid rgba(255, 0, 0, 0.74);
}


.copy-right-section{
    display: flex;
    justify-content: space-between;
    align-items: center !important;
    padding: 30px 0 10px 0;
}


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


    .containers{
        margin: 0 30px !important;
    }
    .flex-content{
        gap: 10px;
    }

    .job-title{
        font-size: 22px;
    }
    .para-text{
     font-size: 16px;
    }
   .job-details-content{
       display: flex;
       flex-direction: column !important;
   }
  .job-detail-section{
    width: 100%;
  }

    .more-job-box{
        width: 100%;
        margin: 30px 0;
     }

     .main-section{
        padding: 0 20px;
    }

    /* -------------f-footer---------------------------- */
    .left-section a ,.right-section a{
        font-size: 12px;
    } 
    .footer-content{
        display: block;
    }
    .footer-logo,.footer-link-content,.stay-connected-content{
     width: 100%;
    }
    .footer-link-content{
     justify-content: space-between;
    }
    .link-header{
     font-size: 1.2rem;
    }
    .footer-text,.footer-link{
     font-size: 1rem;
    }
    
    input,.submit-btn{
     width: 100%;
    }
 
    .copy-right-section{
     display: block;
    }
    .payment-img{
        width: 100%;
        margin: 0 auto !important;
    }
}





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

    .containers{
        margin: 0px 30px !important;
    }

    .socail-logo,.top-header-section {
        display: none;
    }
    .main-header-content{
        height:80px;
    }
    .logo img{
        width: 150px ;
    }

    .main-section{
        padding: 0 0px;
    }


/* =============index page main content============= */
    .job-box{
        padding: 20px;
    }
    .flex-content{
        display: block;
     }
     
     .job-title{
        font-size: 20px;
       }
       .green-text{
        font-weight: 700;
       }
       .small-text{
        font-size: 16px;
       }
       
       .job-text{
        font-size: 22px !important;
    }

    .more-job-box{
        width: 100%;
        margin: 20px auto;
     }

    .job-detail-section{
        width: 100%;
        margin: 0 auto;
    }



    /* ==========footer =========*/

   .footer-content{
       display: block;
   }
   .footer-logo,.footer-link-content,.stay-connected-content{
    width: 100%;
   }
   .footer-link-content{
    justify-content: space-between;
   }
   .link-header{
    font-size: 1.2rem;
   }
   .footer-text,.footer-link{
    font-size: 1rem;
   }
   
   input,.submit-btn{
    width: 100%;

   }

   .copy-right-section{
    display: block;
   }
   .payment-img{
    width: 100%;
    margin: 0 auto !important;
}
}