/*=====================================================
        ADS101 + ADS102 SECTIO
======================================================*/

/* Google Font */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*====================================
    ADS101 WRAPPER
====================================*/

.ads101-wrapper{

    background:#fbf7f2;
    padding:100px 0 80px;
    position:relative;
    overflow:hidden;

}

/* Optional Mandala Background */

.ads101-wrapper::before{

    content:"";
    position:absolute;
    left:-120px;
    top:-80px;
    width:420px;
    height:420px;

    background:url("../images/mandala.png") no-repeat;
    background-size:contain;

    opacity:.05;

}

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

.ads101-main{

    width:90%;
    max-width:1350px;
    margin:auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:70px;

}

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

.ads101-left{
    position:relative;
    z-index:5;
}

.ads101-subtitle{

    display:inline-block;

    color:#b68538;

    font-size:15px;

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:18px;

    text-transform:uppercase;

}

.ads101-title{

    font-size:60px;

    color:#311748;

    line-height:1.15;

    font-weight:700;

    margin-bottom:25px;

}

.ads101-description{

    color:#666;

    font-size:17px;

    line-height:33px;

    margin-bottom:35px;

}

/*====================================
    BUTTON
====================================*/

.ads101-button{

    display:inline-flex;

    align-items:center;

    gap:12px;

    background:#5c2d78;

    color:#fff;

    padding:15px 34px;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.ads101-button:hover{

    background:#b68538;

}

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

.ads101-right img{

    width:100%;

    border-radius:25px;

    box-shadow:0 30px 60px rgba(0,0,0,.15);

}

/*====================================
    PURPLE INFO BOX
====================================*/

.ads101-info-box{

    width:90%;
    max-width:1300px;

    margin:80px auto 0;

    background:#5c2d78;

    border-radius:20px;

    padding:45px 55px;

    display:grid;

    grid-template-columns:1fr auto 1fr;

    align-items:center;

    color:#fff;

}

.ads101-info-item{

    display:flex;

    align-items:flex-start;

    gap:22px;

}

.ads101-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    background:#b68538;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    flex-shrink:0;

}

.ads101-info-item h3{

    font-size:28px;

    margin-bottom:12px;

    font-weight:600;

}

.ads101-info-item p{

    color:#ececec;

    line-height:28px;

}

.ads101-line{

    width:1px;

    height:120px;

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

}

/*=================================================
            ADS102
==================================================*/

.ads102-wrapper{

    background:#fff;

    padding:100px 0;

}

.ads102-container{

    width:90%;

    max-width:1350px;

    margin:auto;

}

.ads102-heading{

    text-align:center;

    margin-bottom:60px;

}

.ads102-subtitle{

    color:#b68538;

    letter-spacing:2px;

    font-weight:700;

    text-transform:uppercase;

    font-size:14px;

}

.ads102-title{

    font-size:52px;

    color:#311748;

    margin:15px 0;

}

.ads102-description{

    color:#666;

    font-size:17px;

    line-height:30px;

    max-width:700px;

    margin:auto;

}

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

.ads102-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

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

.ads102-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.ads102-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(0,0,0,.15);

}

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

.ads102-image-box{

    position:relative;

    overflow:hidden;

}

.ads102-image-box img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.5s;

}

.ads102-card:hover img{

    transform:scale(1.08);

}

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

.ads102-icon{

    position:absolute;

    left:50%;

    bottom:-35px;

    transform:translateX(-50%);

    width:75px;

    height:75px;

    background:#5c2d78;

    color:#fff;

    border-radius:50%;

    border:5px solid #fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:32px;

}

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

.ads102-content{

    padding:60px 30px 35px;

    text-align:center;

}

.ads102-content h3{

    color:#311748;

    font-size:28px;

    margin-bottom:18px;

}

.ads102-content p{

    color:#666;

    line-height:28px;

    margin-bottom:30px;

}

.ads102-btn{

    display:inline-block;

    background:#5c2d78;

    color:#fff;

    padding:13px 30px;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.ads102-btn:hover{

    background:#b68538;

}
/*=====================================================
        ADS101 + ADS102 RESPONSIVE CSS
======================================================*/

/* ===============================
      Large Tablet (1200px)
=================================*/

@media (max-width:1200px){

    .ads101-title{
        font-size:52px;
    }

    .ads102-grid{
        grid-template-columns:repeat(2,1fr);
        gap:35px;
    }

}


/* ===============================
        Tablet (992px)
=================================*/

@media (max-width:992px){

    .ads101-wrapper{
        padding:80px 0;
    }

    .ads101-main{

        grid-template-columns:1fr;
        gap:50px;

        text-align:center;

    }

    .ads101-left{
        order:2;
    }

    .ads101-right{
        order:1;
    }

    .ads101-right img{

        max-width:650px;
        margin:auto;

    }

    .ads101-title{

        font-size:46px;

    }

    .ads101-description{

        max-width:700px;
        margin:0 auto 35px;

    }

    .ads101-info-box{

        grid-template-columns:1fr;
        gap:35px;

        padding:45px 35px;

        text-align:center;

    }

    .ads101-info-item{

        flex-direction:column;
        align-items:center;

    }

    .ads101-line{

        display:none;

    }

    .ads102-grid{

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

    }

}


/* ===============================
        Mobile (768px)
=================================*/

@media (max-width:768px){

    .ads101-wrapper{

        padding:70px 0;

    }

    .ads101-main{

        width:92%;
        gap:35px;

    }

    .ads101-subtitle{

        font-size:13px;

    }

    .ads101-title{

        font-size:38px;
        line-height:1.25;

    }

    .ads101-description{

        font-size:16px;
        line-height:30px;

    }

    .ads101-button{

        padding:14px 28px;
        font-size:15px;

    }

    .ads101-right img{

        border-radius:18px;

    }

    .ads101-info-box{

        width:92%;
        padding:35px 25px;

        margin-top:50px;

        border-radius:16px;

    }

    .ads101-icon{

        width:65px;
        height:65px;

        font-size:28px;

    }

    .ads101-info-item h3{

        font-size:24px;

    }

    .ads101-info-item p{

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

    }

    .ads102-wrapper{

        padding:70px 0;

    }

    .ads102-title{

        font-size:36px;

    }

    .ads102-description{

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

    }

    .ads102-grid{

        grid-template-columns:1fr;
        gap:30px;

    }

    .ads102-image-box img{

        height:300px;

    }

    .ads102-content{

        padding:55px 25px 30px;

    }

    .ads102-content h3{

        font-size:26px;

    }

}


/* ===============================
      Small Mobile (576px)
=================================*/

@media (max-width:576px){

    .ads101-title{

        font-size:32px;

    }

    .ads101-description{

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

    }

    .ads101-button{

        width:100%;
        justify-content:center;

    }

    .ads101-info-box{

        padding:25px 18px;

    }

    .ads101-info-item h3{

        font-size:22px;

    }

    .ads101-info-item p{

        font-size:14px;

    }

    .ads102-title{

        font-size:30px;

    }

    .ads102-description{

        font-size:14px;

    }

    .ads102-image-box img{

        height:240px;

    }

    .ads102-icon{

        width:65px;
        height:65px;

        font-size:28px;

        bottom:-30px;

    }

    .ads102-content{

        padding:50px 20px 25px;

    }

    .ads102-content h3{

        font-size:24px;

    }

    .ads102-content p{

        font-size:15px;
        line-height:26px;

    }

    .ads102-btn{

        width:100%;
        text-align:center;

        padding:14px;

    }

}


/* ===============================
      Extra Small Devices
=================================*/

@media (max-width:400px){

    .ads101-title{

        font-size:28px;

    }

    .ads101-description{

        font-size:14px;

    }

    .ads102-title{

        font-size:28px;

    }

    .ads102-content h3{

        font-size:22px;

    }

}
/*====================================================
        ADS101 & ADS102 PREMIUM ANIMATIONS
====================================================*/

/* Smooth Scrolling */
html{
    scroll-behavior:smooth;
}

/*------------------------------------
    Hero Image Floating
------------------------------------*/

.ads101-right img{
    animation:adsFloatImage 6s ease-in-out infinite;
}

@keyframes adsFloatImage{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0px);
    }

}


/*------------------------------------
      Button Hover
------------------------------------*/

.ads101-button,
.ads102-btn{

    position:relative;
    overflow:hidden;

}

.ads101-button::before,
.ads102-btn::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:100%;
    height:100%;

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

    transform:skewX(-25deg);

    transition:.6s;

}

.ads101-button:hover::before,
.ads102-btn:hover::before{

    left:120%;

}

.ads101-button:hover,
.ads102-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(92,45,120,.35);

}


/*------------------------------------
        Card Hover
------------------------------------*/

.ads102-card{

    transition:.45s ease;

}

.ads102-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 55px rgba(0,0,0,.15);

}


/*------------------------------------
      Card Image Zoom
------------------------------------*/

.ads102-image-box{

    overflow:hidden;

}

.ads102-image-box img{

    transition:transform .8s ease;

}

.ads102-card:hover .ads102-image-box img{

    transform:scale(1.12);

}


/*------------------------------------
      Icon Floating
------------------------------------*/

.ads102-icon{

    animation:adsIconFloat 3s ease-in-out infinite;

}

@keyframes adsIconFloat{

    0%{
        transform:translateX(-50%) translateY(0);
    }

    50%{
        transform:translateX(-50%) translateY(-8px);
    }

    100%{
        transform:translateX(-50%) translateY(0);
    }

}


/*------------------------------------
      Purple Info Icons
------------------------------------*/

.ads101-icon{

    animation:adsGlow 4s ease-in-out infinite;

}

@keyframes adsGlow{

    0%{
        box-shadow:0 0 0 rgba(182,133,56,.3);
    }

    50%{
        box-shadow:0 0 25px rgba(182,133,56,.55);
    }

    100%{
        box-shadow:0 0 0 rgba(182,133,56,.3);
    }

}


/*------------------------------------
      Heading Underline
------------------------------------*/

.ads102-title{

    position:relative;
    display:inline-block;

}

.ads102-title::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-15px;

    transform:translateX(-50%);

    width:90px;
    height:4px;

    background:#c59d5f;

    border-radius:50px;

}


/*------------------------------------
      Hero Title Animation
------------------------------------*/

.ads101-title{

    animation:adsFadeUp 1s ease;

}

.ads101-description{

    animation:adsFadeUp 1.3s ease;

}

.ads101-button{

    animation:adsFadeUp 1.6s ease;

}

@keyframes adsFadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*------------------------------------
       Service Cards Entry
------------------------------------*/

.ads102-card{

    animation:adsCardAppear .9s ease;

}

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

    animation-delay:.2s;

}

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

    animation-delay:.4s;

}

.ads102-card:nth-child(4){

    animation-delay:.6s;

}

@keyframes adsCardAppear{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*------------------------------------
      Image Border Glow
------------------------------------*/

.ads101-right img{

    transition:.5s;

}

.ads101-right:hover img{

    box-shadow:
    0 25px 60px rgba(0,0,0,.15),
    0 0 40px rgba(197,157,95,.25);

}


/*------------------------------------
        Card Button Arrow
------------------------------------*/

.ads102-btn::after{

    content:" →";

    transition:.3s;

}

.ads102-btn:hover::after{

    margin-left:8px;

}


/*------------------------------------
     Section Hover Background
------------------------------------*/

.ads102-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:0;

    background:linear-gradient(
        to bottom,
        rgba(197,157,95,.08),
        transparent
    );

    transition:.5s;

}

.ads102-card:hover::before{

    height:100%;

}


/*------------------------------------
      Premium Cursor Effect
------------------------------------*/

.ads101-button,
.ads102-btn,
.ads102-card{

    cursor:pointer;

}