@import 'partials';

.cybersecurity-section {
    margin: 70px 0px;
    @media($sm-1679){
        margin: 60px 0px;
    }
    @media($sm-1481){
        margin: 50px 0px;
    }
    @media($sm-1199){
        margin: 40px 0px;
    }
    .cyber-security-inner{
        background-color: #EFF7FD;
        padding: 0px;
        align-items: center; 
        border-radius: 50px;
        @media($sm-1679){
            border-radius: 40px;
        }
      @media($sm-579){
        padding: 20px;
      }
        .info-inner-lt{
            background-image: url('../img/service-bg1.png');
            background-size: cover;
            padding: 200px 30px;
            border-radius: 20px;
            min-height: 1198px;
            background-repeat: no-repeat;
            background-position: center;
            @media($sm-1679){
                min-height: 900px;
                padding: 180px 20px;
            }
            @media($sm-1481){
                min-height: 800px;
                padding: 160px 20px;
            }
            @media($sm-1199){
                min-height: 600px;
                padding: 120px 20px;
            }
            @media($sm-991){
                width: 40%;
            }
           
            @media($sm-767){
                margin-bottom: 20px;
                padding: 20px;
                min-height: 250px;
                width: 100%;
                display: flex;
                align-items: center;

            }
            .info-title{
                font-weight: 600;
                font-size: 39px;
                line-height: 100%;
                color: #fff;
                padding-bottom: 33px;
                @media($sm-1679){
                    font-size: 37px;
                    padding-bottom: 25px;
                }
                @media($sm-1481){
                    font-size: 35px;
                    padding-bottom: 20px;
                }
                @media($sm-1199){
                    font-size: 32px;
                    padding-bottom: 15px;
                }
                @media($sm-991){
                    font-size: 28px;
                    padding-bottom: 10px;
                }
                @media($sm-767){
                    font-size: 26px;
                }
                @media($sm-579){
                    font-size: 24px;
                }
                
            }
            .info-content{
                color:rgba(255, 255, 255, 0.52);
                font-weight: 400;
                font-size: 21px;
                line-height: 31px;
                letter-spacing: 0%;
                vertical-align: middle;
                text-transform: capitalize;
                @media($sm-1679){
                    font-size: 18px;
                    line-height: 28px;
                }
                @media($sm-1481){
                    font-size: 16px;
                    line-height: 26px;
                }
                @media($sm-1199){
                    font-size: 14px;
                }

            }

        }
        .info-inner-rt{
            @media($sm-991){
                width: 60%;
            }
         
            @media($sm-767){
                width: 100%;
                padding: 0px;
            }
        }
    }
    .info-card {
        color: white;
        border-radius: 10px;
        text-align: left;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .info-list {
        display: flex;
        flex-direction: column;   
        padding:0px 30px;
        @media($sm-1679){
            padding: 0px 25px;
        }
        @media($sm-1481){
            padding: 0px 20px;
        }
        @media($sm-1199){
            padding: 0px 15px;
        }
        @media($sm-579){
            padding: 0px;
        }
        .info-item {
            background: #fff;
            padding: 36px 41px;
            border-radius: 30px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            @media($sm-1679){
                padding: 28px 35px;
                margin-bottom: 25px;
                border-radius: 25px;
            }
            @media($sm-1481){
                padding: 20px 20px;
                margin-bottom: 20px;
                border-radius: 20px;
            }
            @media($sm-1199){
                padding: 10px;
                margin-bottom: 10px;
                border-radius: 15px;
            }
            @media($sm-579){
                align-items: flex-start;
            }
            &:last-child{
                margin-bottom: 0px;
            }

            .icon {
              width: 71px;
              height: 71px;
              margin-right: 30px;
              flex-shrink: 0;
              @media($sm-1679){
                width: 61px;
                height: 61px;
                margin-right: 20px;
              }
              @media($sm-1481){
                width: 51px;
                height: 51px;
                margin-right: 15px;
              }
              @media($sm-1199){
                width: 41px;
                height: 41px;
                margin-right: 10px;
              }
              img{
                width: 100%;
                height: 100%;
              }
            }
            .content-inner{
                .info-title{
                    font-weight: 600;
                    font-size: 21px;
                    line-height: 28px;
                    color:rgba(0, 0, 0, 1);
                    @media($sm-1679){
                        font-size: 18px;
                        line-height: 28px;
                    }
                    @media($sm-1481){
                        font-size: 16px;
                        line-height: 26px;
                    }
                    @media($sm-1199){
                        font-size: 14px;
                        line-height: 22px;
                    }
                }
               .info-content{

                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #000;
                @media($sm-1679){
                    font-size: 13px;
                }
                @media($sm-1481){
                    font-size: 12px;
                }

               }
            }
        }
    }

    &.col-change{
        .cyber-security-inner{
            flex-direction: row-reverse;
            .info-inner-lt{
                background-image: url('../img/service-bg2.png');
            }
        }
    }
    &.threat-bg{
        .cyber-security-inner{
            .info-inner-lt{
                background-image: url('../img/service-bg3.png');
            }
        }
    }
    &.response-bg{
        .cyber-security-inner{
            .info-inner-lt{
                background-image: url('../img/service-bg4.png');
            }
        } 
    }
    &.compliance-bg{
        .cyber-security-inner{
            .info-inner-lt{
                background-image: url('../img/service-bg5.png');
            }
        } 
    }
    &.cyber-bg{
        .cyber-security-inner{
            .info-inner-lt{
                background-image: url('../img/service-bg6.png');
            }
        }  
    }
}


.our-vision {
    background: #EFF7FD;
    padding: 150px 0px;
    @media($sm-1679){
        padding: 100px 0px;
    }
    @media($sm-1481){
        padding: 80px 0px;
    }
    @media($sm-1199){
        padding: 60px 0px;
    }
    @media($sm-991){
        padding: 40px 0px;
    }
.vision-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    @media($sm-579){
        flex-wrap: wrap;
    }
    .lef-content{
        flex: 1;
        padding-right: 90px;
        @media($sm-1679){
            padding-right: 70px;
        }
        @media($sm-1481){
            padding-right: 50px;
        }
        @media($sm-1199){
            padding-right: 30px;
        }
        @media($sm-767){
            padding-right: 0px;
        }
    }
    .vision-title{
        font-weight: 600;
        font-size: 50px;
        line-height: 25px;
        color: #1A567A;
        padding-bottom: 40px;
        @media($sm-1679){
            font-size: 46px;

        }
        @media($sm-1481){
            font-size: 42px;
        }
        @media($sm-1199){
            font-size: 38px;
        }
        @media($sm-991){
            font-size: 34px;
        }
        @media($sm-767){
            font-size: 30px;
        }

    }
    .sub-title{
        margin-bottom: 25px;
        color: #000;
        @media($sm-1679){
            margin-bottom: 20px;
        }
        @media($sm-1481){
            margin-bottom: 15px;
        }
    }
    .vision-img{
        width: 563px;
        height: 526px;
        @media($sm-1679){
            width: 550px;
            height: 510px;
        }
        @media($sm-1481){
            width: 540px;
            height: 500px;
        }
        @media($sm-1199){
            width: 520px;
            height: 480px;
        }
        @media($sm-991){
            width: 327px;
            height: 293px;
        }
        @media($sm-767){
            width: 230px;
            height: 239px;
        }
        @media($sm-579){
            width: 100%;
            height: 220px;
         
        }
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 30px;
            @media($sm-767){
                border-radius: 15px;
            }

            
        }
    }
}
}