@use "../default/variables";

/*==========================
    Service Area 
===========================*/

.service{
    // Service Style One
    &.service__style--1 {
        padding: 40px 0;
        @extend %transition !optional;
        @extend %posrelative !optional;
        z-index: 2;
        @media #{variables.$sm-layout} {
            padding: 15px 0;
        }
        @media #{variables.$md-layout} {
            padding: 20px 0;
        }
        .icon {
            img {
                margin-bottom: 34px;
                @media #{variables.$sm-layout} {
                    margin-bottom: 14px;
                    height: 53px;
                }
                @media #{variables.$large-mobile} {
                    margin-bottom: 13px;
                    height: 45px;
                }
            }
        }
        .content {
            h4 {
                &.title {
                    margin-bottom: 20px;
                    font-weight: 400;
                    font-size: 24px;
                    @media #{variables.$sm-layout} {
                        margin-bottom: 12px;
                        font-weight: 400;
                        font-size: 20px;
                    }
                    @media #{variables.$large-mobile} {
                        margin-bottom: 9px;
                        font-size: 18px;
                    }
                    
                }
            }
            p {
                opacity: 0.75;
                font-weight: 300;
            }
        }
    }
    
    &.service__style--2 {
        padding: 30px 35px;
        @extend %transition !optional;
        @extend %posrelative !optional;
        z-index: 2;
        border-radius: 10px;
        @media #{variables.$laptop-device} {
            padding: 30px 28px;
        }
        @media #{variables.$md-layout} {
            padding: 30px 25px;
        }
        @media #{variables.$sm-layout} {
            padding: 30px 14px;
        }
        @media #{variables.$large-mobile} {
            padding: 30px 18px;
            margin-top: 30px;
        }

        &::before {
            position: absolute;
            content: "";
            left: 0;
            top: 0;
            background-image: linear-gradient(to right, variables.$theme-color-2 , variables.$theme-color-3);
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0;
            visibility: hidden;
            @extend %transition !optional;
            border-radius: 10px;
            @media #{variables.$large-mobile} {
                opacity: 1;
                visibility: visible;
            }
        }
        .icon {
            font-size: 54px;
            font-weight: 400;
            margin-bottom: 23px;
            display: inline-flex;
            color: variables.$theme-color;
            @extend %transition !optional;
            @media #{variables.$md-layout} {
                margin-bottom: 11px;
            }
            @media #{variables.$large-mobile} {
                color: #ffffff;
            }
           svg {
                stroke-width: 1 !important;
           }
        }
        .content {
            h3 {
                &.title {
                    margin-bottom: 19px;
                    font-weight: 500;
                    @extend %transition !optional;
                    @media #{variables.$laptop-device} {
                        font-size: 19px;
                    }
                    @media #{variables.$sm-layout} {
                        font-size: 20px;
                    }
                    @media #{variables.$md-layout} {
                        margin-bottom: 8px;
                    }
                    @media #{variables.$large-mobile} {
                        color: #ffffff;
                    }
                    a {
                        color: inherit;
                        @media #{variables.$large-mobile} {
                            color: #ffffff;
                        }
                    }
                }
            }
            p {
                @extend %transition !optional;
                color: rgba(29,29,36,0.75);
                @media #{variables.$large-mobile} {
                    color: #ffffff;
                }

            }
        }

        &:hover{
            box-shadow: 0 10px 25px 10px rgba(0, 0, 0, 0.1);
            transform: translateY(-5px);
            &::before {
                opacity: 1;
                visibility: visible;
            }
            .icon{
                color: #ffffff;
            }
            .content{
                h3 {
                    &.title{
                        @extend %textwhite !optional;        
                    }
                }
                p{
                    @extend %textwhite !optional;  
                }
            }
        }

        &.service-left-align {
            display: flex;
            padding: 50px 24px;
            .icon {
                padding-right: 20px;
            }
        }
    }



    // Service Style Four 
    &.service__style--4 {
        padding: 53px 40px;
        z-index: 2;
        border-radius: 10px; 
        position: relative;
        @extend %transition !optional;
        background: #191919;
        height: 100%;
        cursor: pointer;
        @media #{variables.$laptop-device} {
            padding: 36px 25px;
        }
        @media #{variables.$lg-layout} {
            padding: 25px 20px;
        }
        @media #{variables.$md-layout} {
            padding: 30px 25px;
        }
        @media #{variables.$sm-layout} {
            padding: 25px 20px;
        }
        &::before {
            position: absolute;
            content: "";
            left: 0;
            top: 0;
            background-image: -webkit-gradient(linear,left top,right top,from(#f61b10),to(#ef0963));
            background-image: -webkit-linear-gradient(left,#f61b10,#ef0963);
            background-image: linear-gradient(90deg,#f61b10,#ef0963);
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0;
            visibility: hidden;
            border-radius: 10px;
            @extend %transition !optional;
            @media #{variables.$large-mobile} {
                opacity: 1;
                visibility: visible;
            }
        }
        
        .icon {
            display: inline-flex;
            font-size: 54px;
            font-weight: 400;
            margin-bottom: 23px;
            display: inline-flex;
            color: variables.$theme-color;
            @extend %transition !optional;
            @media #{variables.$sm-layout} {
                margin-bottom: 18px;
            }
            @media #{variables.$large-mobile} {
                color: #fff;
            }
            svg {
                stroke-width: 1 !important;
            }
        }
        .content {
            h3 {
                &.title {
                    margin-bottom: 19px;
                    font-weight: 500;
                    font-size: 22px;
                    @extend %transition !optional;
                    @media #{variables.$laptop-device} {
                        margin-bottom: 12px;
                        font-size: 20px;
                    }
                    @media #{variables.$large-mobile} {
                        color: #fff;
                    }
                    @media #{variables.$sm-layout} {
                        margin-bottom: 10px;
                        font-size: 18px;
                    }
                }
            }
            p {
                color: rgba(29,29,36,.75);
                @extend %transition !optional;
                @media #{variables.$large-mobile} {
                    color: #fff;
                }
            }
        }
        &:hover {
            box-shadow: 0 10px 25px 10px rgba(0,0,0,.1);
            -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
            &::before {
                opacity: 1;
                visibility: visible;
            }
            .icon {
                color: #fff;
            }
            .content {
                h3 {
                    &.title {
                        color: #fff;
                    }
                }
                p {
                    color: #fff;
                }
            }
        }
    }
    
   
    
}

/* ---------------------------
    Standard Service  
-------------------------------*/
.standard-service {
    .thumbnai {
        img {
            border-radius: 5px;
        }
    }
    .content{
        h3 {
            font-size: 19px;
            margin-top: 30px;
            margin-bottom: 10px;
            font-weight: 600;
            a {
                @extend %transition !optional;
                color: variables.$heading-color;
                &:hover {
                    color: variables.$theme-color;
                }
            }
        }
        p {
            font-size: 15px;
            line-height: 24px;
        }
        a {

        }
    }
}



.text-center ,
.text-left {
    .service {
        &.service__style--2 {
            padding: 60px 45px;
            @media #{variables.$sm-layout} {
                padding: 30px 14px;
            }
            @media #{variables.$lg-layout} {
                padding: 30px 14px;
            }
            @media #{variables.$md-layout} {
                padding: 30px 14px;
            }
        }
    }
}

// Sercvice Style One
.service-white{
    // Service Style One
    .service__style--1 {
        z-index: 2;
        .content {
            h4 {
                &.title {
                   color: #c6c9d8;
                }
            }
            p{
                color: #c6c9d8;

            }
        }
    }
}

/*---------------------------
    Paralax Service Style  
-----------------------------*/

.rn-paralax-service {
    .service__style--2 {
        z-index: 2;
        padding: 40px 40px;
        background: rgba(255,255,255, 0.3);
        margin-top: 40px;
        overflow: hidden;
        border: 2px solid transparent;
        
        @media #{variables.$sm-layout} {
            padding: 30px 20px;
            background: transparent;
            margin-top: 30px;
        }
        
        .icon {
            color: #ffffff;
        }
        .content {
            h3 {
                &.title {
                    font-size: 19px;
                    color: #ffffff;
                }
            }
            p {
                color: rgba(255,255,255, 0.75);
            }
        }
        &:hover {
            border: 2px solid variables.$theme-color;
            &::before {
                border-radius: 0;
            }
        }
    }
}

/* Creative Agency Service  */
.creative-service-wrapper {
    .row {
        &.creative-service {
            a{
                display: flex;
                height: 100%;
            }
            .service {

                &.service__style--2 {
                    margin-top: 30px;
                    background: #f6f6f6;
                }
            }
        }
    }
    
}



.service-one-wrapper{
    @media #{variables.$md-layout} {
        margin: 0 -40px;
    }
}