/*====================================
CAREER HERO
=====================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Poppins",sans-serif;
    background:#fff;
    overflow-x:hidden;
}

.career-hero{

    position:relative;
    overflow:hidden;

    background:linear-gradient(130deg,#003c88,#0d5ec4);

    min-height:100vh;

    display:flex;
    align-items:center;

    padding:100px 8%;
}


.career-hero .container{

    width:100%;
    max-width:1400px;

    margin:auto;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:70px;
}



/*==========================
LEFT
==========================*/

.hero-left{

    width:60%;
    z-index:5;

    animation:leftFade 1.2s ease;
}

.hero-tag{

    color:white;

    letter-spacing:3px;

    font-size:13px;

    display:inline-block;

    margin-bottom:25px;

    opacity:.9;
}



.hero-left h1{

    color:white;

    font-size:72px;

    line-height:1.05;

    font-weight:700;

    margin-bottom:35px;
}


.hero-left h1 span{

    color:#77b6ff;

    display:block;

    animation:textGlow 2.5s infinite;
}


.hero-left p{

    color:rgba(255,255,255,.75);

    font-size:21px;

    line-height:1.8;

    max-width:700px;

    margin-bottom:50px;
}


/*======================
BUTTONS
======================*/

.hero-buttons{

    display:flex;
    gap:20px;
}


.btn-primary{

    background:#ffffff;

    color:#00469b;

    text-decoration:none;

    padding:18px 38px;

    border-radius:12px;

    font-weight:600;

    transition:.4s;

    position:relative;

    overflow:hidden;
}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 40px rgba(0,0,0,.25);
}


.btn-outline{

    border:2px solid rgba(255,255,255,.35);

    color:white;

    text-decoration:none;

    padding:18px 38px;

    border-radius:12px;

    transition:.4s;
}


.btn-outline:hover{

    background:white;

    color:#00469b;

    transform:translateY(-5px);
}



/*=========================
RIGHT
=========================*/

.hero-right{

    width:260px;

    display:flex;

    flex-direction:column;

    gap:25px;

    animation:rightFade 1.5s ease;
}



.info-card{

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.12);

    border-radius:18px;

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px;

    transition:.45s;

    animation:float 5s infinite ease-in-out;
}


.info-card:nth-child(2){

    animation-delay:.8s;
}

.info-card:nth-child(3){

    animation-delay:1.5s;
}



.info-card:hover{

    transform:translateY(-10px) scale(1.03);

    background:rgba(255,255,255,.15);

    box-shadow:0 20px 40px rgba(0,0,0,.25);
}



.icon{

    width:55px;

    height:55px;

    border-radius:50%;

    background:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;
}



.info-card h3{

    color:white;

    font-size:30px;
}


.info-card p{

    color:#dce8ff;

    font-size:15px;
}



/*=========================
BACKGROUND CIRCLES
=========================*/

.hero-bg-circle{

    position:absolute;

    border-radius:50%;

    background:rgba(255,255,255,.06);

    animation:rotateCircle 30s linear infinite;
}



.circle1{

    width:520px;
    height:520px;
    top:-180px;
    right:-120px;
}



.circle2{
    width:340px;
    height:340px;
    bottom:-120px;
    left:-120px;
    animation-duration:18s;
}



/*======================
ANIMATIONS
======================*/

@keyframes leftFade{

    from{

        opacity:0;

        transform:translateX(-80px);
    }

    to{

        opacity:1;

        transform:translateX(0);
    }
}



@keyframes rightFade{

    from{

        opacity:0;

        transform:translateX(80px);
    }

    to{

        opacity:1;

        transform:translateX(0);
    }
}



@keyframes float{

    0%{

        transform:translateY(0px);
    }

    50%{

        transform:translateY(-12px);
    }

    100%{

        transform:translateY(0px);
    }
}



@keyframes rotateCircle{

    from{

        transform:rotate(0deg);
    }

    to{

        transform:rotate(360deg);
    }
}



@keyframes textGlow{

    0%{

        text-shadow:0 0 0 transparent;
    }

    50%{

        text-shadow:0 0 20px rgba(255,255,255,.55);
    }

    100%{

        text-shadow:0 0 0 transparent;
    }
}



/*======================
RESPONSIVE
======================*/

@media(max-width:992px){

.career-hero .container{

    flex-direction:column;
    text-align:center;
}


.hero-left{

    width:100%;
}


.hero-right{

    width:100%;
    max-width:420px;
}


.hero-buttons{

    justify-content:center;
}


.hero-left h1{

    font-size:54px;
}

}


@media(max-width:768px){

.career-hero{

    padding:80px 25px;
}


.hero-left h1{

    font-size:40px;
}


.hero-left p{

    font-size:17px;
}


.hero-buttons{

    flex-direction:column;
}


.info-card{

    padding:18px;
}

}

/* =========================================================
   WHY JOIN US SECTION
========================================================= */

.why-join-section {
    width: 100%;
    background: #f5f8fd;
    padding: 85px 0 100px;
    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.why-container {
    width: 90%;
    max-width: 1320px;
    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.why-header {
    margin-bottom: 48px;
}


/* SMALL LABEL */

.why-tag {
    position: relative;

    display: inline-block;

    padding-left: 40px;

    color: #0757b8;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    line-height: 1;
}


/* BLUE LINE */

.why-tag::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 26px;
    height: 3px;

    background: #0757b8;

    border-radius: 5px;

    transform: translateY(-50%);
}


/* MAIN HEADING */

.why-header h2 {
    margin: 14px 0 0;

    color: #10294d;

    font-size: 42px;
    font-weight: 750;

    line-height: 1.2;

    letter-spacing: -0.5px;
}


/* =========================================================
   GRID
========================================================= */

.why-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 28px;

    width: 100%;
}


/* =========================================================
   CARD
========================================================= */

.why-card {

    width: 100%;

    min-height: 270px;

    background: #ffffff;

    border: 1px solid #e6ebf2;

    border-radius: 18px;

    padding: 30px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;

    opacity: 0;

    transform: translateY(35px);

    animation: whyCardReveal 0.8s ease forwards;
}


/* =========================================================
   CARD ANIMATION DELAY
========================================================= */

.why-card:nth-child(1) {
    animation-delay: 0.1s;
}

.why-card:nth-child(2) {
    animation-delay: 0.2s;
}

.why-card:nth-child(3) {
    animation-delay: 0.3s;
}

.why-card:nth-child(4) {
    animation-delay: 0.4s;
}


/* =========================================================
   CARD REVEAL
========================================================= */

@keyframes whyCardReveal {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   CARD HOVER
========================================================= */

.why-card:hover {

    transform: translateY(-8px);

    border-color: #dbe5f2;

    box-shadow:
        0 18px 40px rgba(15, 43, 77, 0.10);
}


/* =========================================================
   ICON CONTAINER
========================================================= */

.why-icon {

    width: 56px;
    height: 56px;

    flex: 0 0 56px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 16px;

    margin-bottom: 24px;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


/* =========================================================
   ICON IMAGE
========================================================= */

.why-icon img {

    width: 30px;
    height: 30px;

    max-width: 30px;
    max-height: 30px;

    object-fit: contain;

    display: block;

    transition:
        transform 0.35s ease;
}


/* =========================================================
   ICON BACKGROUNDS
========================================================= */

.career-icon {
    background: #eaf2fa;
}

.innovation-icon {
    background: #f7f9df;
}

.team-icon {
    background: #e7f5fb;
}

.brand-icon {
    background: #f7e8f3;
}


/* =========================================================
   ICON HOVER
========================================================= */

.why-card:hover .why-icon {

    transform: translateY(-3px);

    box-shadow:
        0 8px 20px rgba(16, 40, 70, 0.08);
}


.why-card:hover .why-icon img {

    transform: scale(1.12);
}


/* =========================================================
   CARD TITLE
========================================================= */

.why-card h3 {

    margin: 0 0 12px;

    color: #10294d;

    font-size: 19px;

    font-weight: 700;

    line-height: 1.35;

    letter-spacing: -0.1px;
}


/* =========================================================
   CARD PARAGRAPH
========================================================= */

.why-card p {

    margin: 0;

    color: #7d8da5;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.65;

    letter-spacing: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .why-container {
        width: 92%;
    }

    .why-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 24px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .why-join-section {

        padding: 65px 0 75px;
    }

    .why-container {

        width: 90%;
    }

    .why-header {

        margin-bottom: 35px;
    }

    .why-header h2 {

        font-size: 34px;
    }

    .why-tag {

        font-size: 12px;

        letter-spacing: 1.7px;

        padding-left: 35px;
    }

    .why-tag::before {

        width: 23px;
        height: 2px;
    }

    .why-grid {

        grid-template-columns: 1fr;

        gap: 20px;
    }

    .why-card {

        min-height: auto;

        padding: 28px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .why-header h2 {

        font-size: 30px;
    }

    .why-card {

        padding: 25px;
    }

    .why-card h3 {

        font-size: 18px;
    }

    .why-card p {

        font-size: 15px;

        line-height: 1.65;
    }

}
/* ===========================================
   CAREERS SECTION
=========================================== */

.job-section{
    padding:100px 8%;
    background:#f8fbff;
    overflow:hidden;
}

.job-container{
    max-width:1400px;
    margin:auto;
}

.job-header{
    text-align:center;
    margin-bottom:60px;
}

.job-header span{
    color:#0A5AC2;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.job-header h2{
    font-size:44px;
    color:#13294B;
    margin:15px 0;
}

.job-header p{
    max-width:700px;
    margin:auto;
    color:#666;
    line-height:1.8;
}

.job-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

/* ===========================================
   JOB CARD
=========================================== */

.job-card{
    background:#fff;
    border-radius:18px;
    padding:30px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    border-top:5px solid #0A5AC2;
    transition:.35s;
}

.job-card:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 40px rgba(0,0,0,.15);
}

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

.job-info{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
}

.job-category{
    background:#0A5AC2;
    color:#fff;
    padding:6px 15px;
    border-radius:50px;
    font-size:12px;
    font-weight:600;
}

.job-info small{
    color:#777;
    font-size:13px;
}

.job-card h3{
    font-size:28px;
    color:#13294B;
    margin-bottom:10px;
}

.experience{
    color:#0A5AC2;
    font-weight:600;
    margin-bottom:15px;
}

.job-card p{
    color:#555;
    line-height:1.7;
}

/* ===========================================
   BUTTONS
=========================================== */

.apply-btn{
    background:#0A5AC2;
    color:#fff;
    border:none;
    padding:12px 24px;
    border-radius:40px;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    transition:.3s;
}

.apply-btn:hover{
    background:#083f8c;
    transform:translateY(-3px);
}

.details-btn{
    margin-top:25px;
    background:none;
    border:none;
    color:#0A5AC2;
    cursor:pointer;
    font-weight:600;
    font-size:15px;
}

.details-btn:hover{
    color:#083f8c;
}

/* ===========================================
   DETAILS
=========================================== */

.job-details{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;
}

.job-details.active{
    max-height:700px;
    margin-top:25px;
}

.job-details h4{
    color:#13294B;
    margin:20px 0 10px;
}

.job-details ul{
    padding-left:20px;
}

.job-details li{
    margin-bottom:10px;
    color:#555;
}

/* ===========================================
   CATEGORY COLORS
=========================================== */

.marketing{
    border-top-color:#0A5AC2;
}

.marketing .job-category,
.marketing .apply-btn{
    background:#0A5AC2;
}

.admin{
    border-top-color:#B8C800;
}

.admin .job-category,
.admin .apply-btn{
    background:#B8C800;
    color:#fff;
}

.sales{
    border-top-color:#ff6b00;
}

.sales .job-category,
.sales .apply-btn{
    background:#ff6b00;
}

.support{
    border-top-color:#6a5acd;
}

.support .job-category,
.support .apply-btn{
    background:#6a5acd;
}

.hr{
    border-top-color:#009688;
}

.hr .job-category,
.hr .apply-btn{
    background:#009688;
}

.accounts{
    border-top-color:#e91e63;
}

.accounts .job-category,
.accounts .apply-btn{
    background:#e91e63;
}

/* ===========================================
   APPLICATION MODAL
=========================================== */

.application-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:99999;
}

.application-modal.show{
    opacity:1;
    visibility:visible;
}

.application-box{
    background:#fff;
    width:700px;
    max-width:95%;
    max-height:90vh;
    overflow-y:auto;
    border-radius:20px;
    padding:40px;
    position:relative;
    animation:popup .35s ease;
}

@keyframes popup{

from{
    transform:translateY(40px);
    opacity:0;
}

to{
    transform:translateY(0);
    opacity:1;
}

}

.close-modal{
    position:absolute;
    top:18px;
    right:20px;
    font-size:30px;
    cursor:pointer;
    color:#555;
}

.application-box h2{
    color:#13294B;
    margin-bottom:10px;
}

.application-box p{
    color:#666;
    margin-bottom:30px;
}

/* ===========================================
   FORM
=========================================== */

.form-group{
    margin-bottom:22px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:#333;
}

.form-group input,
.form-group textarea{
    width:100%;
    padding:14px 15px;
    border:1px solid #ddd;
    border-radius:10px;
    outline:none;
    font-size:15px;
    transition:.3s;
    box-sizing:border-box;
}

.form-group input:focus,
.form-group textarea:focus{
    border-color:#0A5AC2;
    box-shadow:0 0 0 4px rgba(10,90,194,.15);
}

.form-group textarea{
    resize:vertical;
}

.form-group input[type=file]{
    border:2px dashed #bbb;
    background:#fafafa;
    cursor:pointer;
}

.submit-btn{
    width:100%;
    padding:16px;
    background:#0A5AC2;
    color:#fff;
    border:none;
    border-radius:10px;
    cursor:pointer;
    font-size:16px;
    font-weight:600;
    transition:.3s;
}

.submit-btn:hover{
    background:#083f8c;
}

/* ===========================================
   SCROLLBAR
=========================================== */

.application-box::-webkit-scrollbar{
    width:8px;
}

.application-box::-webkit-scrollbar-thumb{
    background:#0A5AC2;
    border-radius:10px;
}

/* ===========================================
   RESPONSIVE
=========================================== */

@media(max-width:992px){

.job-grid{
    grid-template-columns:1fr;
}

.job-card{
    padding:25px;
}

.job-top{
    flex-direction:column;
    align-items:flex-start;
}

.apply-btn{
    width:100%;
}

.application-box{
    padding:30px;
}

}

@media(max-width:576px){

.job-section{
    padding:70px 20px;
}

.job-header h2{
    font-size:32px;
}

.job-card h3{
    font-size:22px;
}

.application-box{
    padding:20px;
}

}
/* =========================================================
   TASKTEL - OPEN APPLICATION SECTION
   Only for the Open Application section.
   Existing company footer is NOT affected.
========================================================= */

.open-application-section {
    width: min(1500px, calc(100% - 100px));
    min-height: 210px;

    margin: 60px auto 70px;
    padding: 42px 42px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;

    position: relative;
    overflow: hidden;

    border-radius: 20px;

    background: linear-gradient(
        105deg,
        #07579f 0%,
        #03457f 55%,
        #022d54 100%
    );

    box-shadow: 0 15px 35px rgba(0, 35, 70, 0.10);

    animation: openApplicationFade 0.8s ease forwards;
}


/* =========================================================
   BACKGROUND EFFECT
========================================================= */

.open-application-section::before {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: -180px;
    top: -250px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.035);

    animation: openApplicationGlow 7s ease-in-out infinite alternate;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.open-application-content {
    position: relative;
    z-index: 2;

    flex: 1;
}


/* Small heading */

.open-application-label {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 12px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    letter-spacing: 0.2px;
}

.open-application-label i {
    font-size: 13px;
}


/* Main heading */

.open-application-content h2 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: 28px;
    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -0.3px;
}


/* Description */

.open-application-content p {
    margin: 0;

    color: rgba(255, 255, 255, 0.88);

    font-size: 14px;
    line-height: 1.6;

    font-weight: 400;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.open-application-actions {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 12px;

    flex-shrink: 0;
}


/* =========================================================
   EMAIL CV BUTTON
========================================================= */

.open-application-cv {
    height: 46px;
    min-width: 150px;

    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    border-radius: 25px;

    background: #0878d8;

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    transition: all 0.3s ease;
}

.open-application-cv i {
    font-size: 12px;

    transition: transform 0.3s ease;
}

.open-application-cv:hover {
    background: #1687e8;

    transform: translateY(-3px);

    box-shadow: 0 8px 20px rgba(0, 110, 220, 0.30);
}

.open-application-cv:hover i {
    transform: translateX(5px);
}


/* =========================================================
   EMAIL ADDRESS
========================================================= */

.open-application-email {
    width: 290px;
    height: 46px;

    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border: 1px solid rgba(255, 255, 255, 0.20);

    border-radius: 25px;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 400;

    white-space: nowrap;

    transition: all 0.3s ease;
}

.open-application-email i {
    font-size: 12px;
}

.open-application-email:hover {
    border-color: rgba(255, 255, 255, 0.45);

    background: rgba(255, 255, 255, 0.05);

    transform: translateY(-3px);
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes openApplicationFade {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes openApplicationGlow {

    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-40px, 45px);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .open-application-section {
        width: calc(100% - 60px);

        padding: 38px 35px;

        gap: 35px;
    }

    .open-application-content h2 {
        font-size: 25px;
    }

    .open-application-content p {
        font-size: 13px;
    }

    .open-application-email {
        width: 260px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .open-application-section {
        width: calc(100% - 30px);

        margin: 40px auto 60px;

        padding: 35px 28px;

        flex-direction: column;

        align-items: flex-start;

        gap: 30px;
    }

    .open-application-content h2 {
        font-size: 24px;
    }

    .open-application-content p {
        font-size: 13px;
    }

    .open-application-actions {
        width: 100%;

        flex-direction: column;

        align-items: stretch;
    }

    .open-application-cv,
    .open-application-email {
        width: 100%;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .open-application-section {
        padding: 30px 22px;
    }

    .open-application-label {
        font-size: 13px;
    }

    .open-application-content h2 {
        font-size: 21px;
    }

    .open-application-content p {
        font-size: 12px;
    }

    .open-application-cv,
    .open-application-email {
        height: 44px;
    }
}
/* =========================================================
   TASKTEL - STAY UPDATED SECTION
   REFERENCE-MATCHED DESKTOP VERSION
========================================================= */

.tasktel-update-section {
    width: 100% !important;
    height: 166px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #08a2d8 !important;

    position: relative !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    font-family: Arial, Helvetica, sans-serif !important;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.tasktel-update-container {
    position: relative !important;

    width: calc(100% - 160px) !important;
    height: 166px !important;

    margin: 0 80px !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    display: block !important;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.tasktel-update-info {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 500px !important;
    height: 166px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;

    box-sizing: border-box !important;
}


/* =========================================================
   MAIL ICON
========================================================= */

.tasktel-mail-icon {
    width: 70px !important;
    height: 70px !important;

    min-width: 70px !important;

    margin: 0 22px 0 0 !important;
    padding: 0 !important;

    background: #ffffff !important;

    border-radius: 50% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.14) !important;
}


.tasktel-mail-icon svg {
    width: 35px !important;
    height: 35px !important;

    display: block !important;

    fill: none !important;

    stroke: #0785b3 !important;

    stroke-width: 1.8 !important;
}


/* =========================================================
   TEXT
========================================================= */

.tasktel-update-text {
    margin: 0 !important;
    padding: 0 !important;
}


.tasktel-update-text h2 {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-family: Arial, Helvetica, sans-serif !important;

    font-size: 20px !important;

    line-height: 24px !important;

    font-weight: 700 !important;

    white-space: nowrap !important;
}


.tasktel-update-text p {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-family: Arial, Helvetica, sans-serif !important;

    font-size: 12px !important;

    line-height: 17px !important;

    font-weight: 400 !important;

    white-space: nowrap !important;
}


/* =========================================================
   EMAIL / SUBSCRIBE AREA

   LEFT POSITION:
   80px + 518px = approximately 598px
========================================================= */

.tasktel-subscribe-area {
    position: absolute !important;

    left: 518px !important;
    top: 28px !important;

    width: 516px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   EMAIL BOX
========================================================= */

.tasktel-subscribe-form {
    width: 516px !important;
    height: 68px !important;

    margin: 0 !important;
    padding: 6px 7px 6px 28px !important;

    box-sizing: border-box !important;

    display: flex !important;

    align-items: center !important;

    background: #f7f7fb !important;

    border: none !important;

    border-radius: 40px !important;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10) !important;
}


/* INPUT */

.tasktel-subscribe-form input {
    width: auto !important;
    height: 100% !important;

    flex: 1 !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    outline: none !important;

    background: transparent !important;

    color: #333333 !important;

    font-family: Arial, Helvetica, sans-serif !important;

    font-size: 14px !important;

    font-weight: 400 !important;

    line-height: normal !important;

    box-shadow: none !important;
}


.tasktel-subscribe-form input::placeholder {
    color: #91a1b6 !important;

    opacity: 1 !important;
}


/* =========================================================
   GREEN ARROW
========================================================= */

.tasktel-subscribe-form button {
    width: 54px !important;
    height: 54px !important;

    min-width: 54px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;

    border-radius: 50% !important;

    background: #91b500 !important;

    color: #ffffff !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

    transition: transform 0.25s ease,
                background 0.25s ease !important;
}


.tasktel-subscribe-form button svg {
    width: 24px !important;
    height: 24px !important;

    display: block !important;

    fill: none !important;

    stroke: #ffffff !important;

    stroke-width: 2 !important;
}


.tasktel-subscribe-form button:hover {
    background: #7e9d00 !important;

    transform: scale(1.05) !important;
}


/* =========================================================
   CHECKBOX
========================================================= */

.tasktel-consent {
    display: flex !important;

    align-items: center !important;

    gap: 9px !important;

    margin: 10px 0 0 0 !important;
    padding: 0 !important;

    height: 18px !important;
}


.tasktel-consent input {
    width: 17px !important;
    height: 17px !important;

    min-width: 17px !important;

    margin: 0 !important;
    padding: 0 !important;

    cursor: pointer !important;
}


.tasktel-consent label {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-family: Arial, Helvetica, sans-serif !important;

    font-size: 12px !important;

    line-height: 17px !important;

    font-weight: 400 !important;

    white-space: nowrap !important;
}


.tasktel-consent a {
    color: #ffffff !important;

    font-weight: 700 !important;

    text-decoration: underline !important;
}


/* =========================================================
   SOCIAL ICONS

   80px + 1135px = approximately 1215px
========================================================= */

/* =========================================================
   SOCIAL ICONS
========================================================= */

.tasktel-social-links {
    position: absolute !important;

    left: 1190px !important;
    top: 0 !important;

    height: 166px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    gap: 27px !important;
}

.tasktel-social-links a {
    width: 41px !important;
    height: 41px !important;

    min-width: 41px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1.5px solid #ffffff !important;

    border-radius: 50% !important;

    background: transparent !important;

    color: #ffffff !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-decoration: none !important;

    box-sizing: border-box !important;
}


/* SOCIAL CIRCLE */

.tasktel-social-links a {
    width: 41px !important;
    height: 41px !important;

    min-width: 41px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1.5px solid #ffffff !important;

    border-radius: 50% !important;

    background: transparent !important;

    color: #ffffff !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    text-decoration: none !important;

    box-sizing: border-box !important;

    transition: all 0.25s ease !important;
}


.tasktel-social-links a svg {
    width: 21px !important;
    height: 21px !important;

    display: block !important;

    fill: none !important;

    stroke: currentColor !important;

    stroke-width: 1.7 !important;
}


.tasktel-social-links a:hover {
    background: #ffffff !important;

    color: #0796c9 !important;

    transform: translateY(-3px) !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1250px) {

    .tasktel-update-container {
        width: calc(100% - 60px) !important;

        margin: 0 30px !important;
    }

    .tasktel-subscribe-area {
        left: 470px !important;
    }

    .tasktel-social-links {
        left: 1000px !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 850px) {

    .tasktel-update-section {
        height: auto !important;

        padding: 30px 0 !important;
    }

    .tasktel-update-container {
        width: calc(100% - 40px) !important;

        height: auto !important;

        margin: 0 20px !important;
    }

    .tasktel-update-info {
        position: relative !important;

        left: auto !important;
        top: auto !important;

        width: 100% !important;
        height: auto !important;

        margin-bottom: 25px !important;
    }

    .tasktel-subscribe-area {
        position: relative !important;

        left: auto !important;
        top: auto !important;

        width: 100% !important;
    }

    .tasktel-subscribe-form {
        width: 100% !important;
    }

    .tasktel-social-links {
        position: relative !important;

        left: auto !important;
        top: auto !important;

        height: auto !important;

        margin-top: 22px !important;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .tasktel-update-container {
        width: calc(100% - 30px) !important;

        margin: 0 15px !important;
    }

    .tasktel-mail-icon {
        width: 60px !important;
        height: 60px !important;

        min-width: 60px !important;
    }

    .tasktel-update-text h2 {
        font-size: 17px !important;

        white-space: normal !important;
    }

    .tasktel-update-text p {
        font-size: 10px !important;

        white-space: normal !important;
    }

    .tasktel-subscribe-form {
        height: 58px !important;
    }

    .tasktel-subscribe-form button {
        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
    }

    .tasktel-consent label {
        white-space: normal !important;

        font-size: 10px !important;
    }
}