/*==================================================
  HERO SECTION
==================================================*/

.gjp-hero-section{

    width:100%;

    margin-top:8px;

}

.gjp-hero-slider{

    position:relative;

    width:100%;

    overflow:hidden;

}

.gjp-hero-slide{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    overflow:hidden;

    min-height:340px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #083baf 0%,
        #0b4dbb 45%,
        #1257d6 100%
    );

}

/*=========================================
Hero Overlay
=========================================*/

.gjp-hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to right,
        rgba(0,0,0,.10),
        rgba(0,0,0,.05)
    );

    z-index:1;

}

/*=========================================
Hero Content Area
=========================================*/

.gjp-hero-content{

    position:relative;

    z-index:5;

    width:52%;

    padding-left:42px;

}

/*=========================================
Telangana Map
=========================================*/

.gjp-hero-map{

    position:absolute;

    top:18px;

    right:190px;

    width:255px;

    z-index:2;

    opacity:.16;

    pointer-events:none;

}

.gjp-hero-map img{

    width:100%;

    display:block;

}

/*=========================================
Charminar Image
=========================================*/

.gjp-charminar{

    position:absolute;

    right:10px;

    bottom:0;

    width:315px;

    z-index:4;

}

.gjp-charminar img{

    display:block;

    width:100%;

    height:auto;

}

/*=========================================
Slider Wrapper
=========================================*/

.gjp-slider-dots{

    position:absolute;

    left:50%;

    bottom:18px;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:10px;

    z-index:10;

}
/*=========================================
Hero Badge
=========================================*/

.gjp-hero-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    margin-bottom:18px;

    border-radius:30px;

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

    color:#ffffff;

    font-size:14px;

    font-weight:600;

    letter-spacing:.3px;

    backdrop-filter:blur(8px);

}

/*=========================================
Hero Title
=========================================*/

.gjp-hero-title{

    margin:0;

    color:#ffffff;

    font-weight:800;

    line-height:1.08;

}

.gjp-hero-title .line-1{

    display:block;

    font-size:54px;

}

.gjp-hero-title .line-2{

    display:block;

    font-size:54px;

    margin-top:6px;

}

/*=========================================
Hero Description
=========================================*/

.gjp-hero-description{

    margin-top:24px;

    margin-bottom:32px;

    max-width:520px;

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

    font-size:18px;

    line-height:1.8;

    font-weight:400;

}

/*=========================================
Hero Button
=========================================*/

.gjp-hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    width:240px;

    height:58px;

    border-radius:50px;

    background:#FFD54A;

    color:#1d1d1d;

    text-decoration:none;

    font-size:17px;

    font-weight:700;

    transition:.30s ease;

    position:relative;

    z-index:5;

}

.gjp-hero-btn:hover{

    background:#FFC107;

    transform:translateY(-3px);

}

.hero-arrow{

    font-size:20px;

    font-weight:700;

}

/*=========================================
Slider Dots
=========================================*/

.gjp-slider-dots button{

    width:11px;

    height:11px;

    border:none;

    border-radius:50%;

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

    cursor:pointer;

    transition:.30s;

}

.gjp-slider-dots button.active{

    width:32px;

    border-radius:30px;

    background:#FFD54A;

}

.gjp-slider-dots button:hover{

    background:#ffffff;

}
/*==================================================
  HERO RESPONSIVE
==================================================*/

/* Large Desktop */
@media (max-width: 1400px){

    .gjp-hero-slide{

        min-height:320px;

    }

    .gjp-hero-content{

        width:55%;

        padding-left:36px;

    }

    .gjp-hero-title .line-1,
    .gjp-hero-title .line-2{

        font-size:48px;

    }

    .gjp-charminar{

        width:285px;

    }

    .gjp-hero-map{

        width:225px;

        right:170px;

    }

}


/* Laptop */
@media (max-width: 1200px){

    .gjp-hero-slide{

        min-height:300px;

    }

    .gjp-hero-content{

        width:58%;

        padding-left:30px;

    }

    .gjp-hero-title .line-1,
    .gjp-hero-title .line-2{

        font-size:42px;

    }

    .gjp-hero-description{

        font-size:16px;

        line-height:1.7;

    }

    .gjp-charminar{

        width:250px;

    }

    .gjp-hero-map{

        width:200px;

        right:150px;

    }

}


/* Tablet */
@media (max-width: 992px){

    .gjp-hero-slide{

        min-height:520px;

        flex-direction:column;

        justify-content:flex-start;

        text-align:center;

        padding-top:45px;

    }

    .gjp-hero-content{

        width:100%;

        padding:0 30px;

    }

    .gjp-hero-description{

        margin-left:auto;

        margin-right:auto;

    }

    .gjp-hero-btn{

        margin:auto;

    }

    .gjp-charminar{

        position:relative;

        right:auto;

        bottom:auto;

        margin-top:35px;

        width:260px;

    }

    .gjp-hero-map{

        right:50%;

        transform:translateX(50%);

        top:160px;

        width:200px;

        opacity:.10;

    }

}


/* Mobile */
@media (max-width:768px){

    .gjp-hero-slide{

        min-height:470px;

        border-radius:14px;

        padding-top:35px;

    }

    .gjp-hero-content{

        padding:0 20px;

    }

    .gjp-hero-badge{

        font-size:13px;

        padding:7px 16px;

    }

    .gjp-hero-title .line-1,
    .gjp-hero-title .line-2{

        font-size:34px;

    }

    .gjp-hero-description{

        font-size:15px;

        margin-top:18px;

        margin-bottom:25px;

    }

    .gjp-hero-btn{

        width:210px;

        height:52px;

        font-size:16px;

    }

    .gjp-charminar{

        width:200px;

        margin-top:25px;

    }

    .gjp-hero-map{

        width:150px;

        top:145px;

    }

}


/* Small Mobile */
@media (max-width:480px){

    .gjp-hero-slide{

        min-height:430px;

    }

    .gjp-hero-title .line-1,
    .gjp-hero-title .line-2{

        font-size:28px;

    }

    .gjp-hero-description{

        font-size:14px;

        line-height:1.6;

    }

    .gjp-hero-btn{

        width:190px;

        height:48px;

        font-size:15px;

    }

    .gjp-charminar{

        width:170px;

    }

    .gjp-slider-dots{

        bottom:12px;

    }

}