#home-pg{

    background: radial-gradient(circle, #ffffff, #b8e4fc);

    .banner-div{
        overflow: hidden;       
        background-size: 100%;
        background-position: center;
        padding: 60px 100px;

        .text-left{
            max-width: 620px;
            h2{
                font-size: 48px;
                font-weight: 700;
                letter-spacing: 4px;

                span{
                    color: #22b3cb;
                }
            }

            p{
                font-size: 18px;
                line-height: 1.8;
            }

            .btn-dv{
                
                .btn{
                    border-radius: 7px;
                    width: 200px;
                    text-align: center;
                    font-size: 16px;                                     
                    font-weight: 700;
                    letter-spacing: 1px;
                    padding: 7px 10px;
                }

                .btn1{  background: #22b3cb; color: #fff; margin-right: 15px; border: 2px solid #22b3cb; }
                .btn2{  background: transparent; color: #22b3cb; border: 2px solid #22b3cb;}
            }
        }       

    }



    .choose-dv{

        .box{
            transition: 1s;

            min-height: 225px;

            h4{ margin-bottom: 10px;}

            .icn-img{
                width: 50px;
                margin-left: auto;
                margin-right: auto;
            }
        }

        .box:hover{
            transform: scale(1.04, 1.06);
        }

        
    }

    .do-service{
        padding-top: 60px; padding-bottom: 60px;
        background: #3ac5ef26;

        .srv-img-1{
            img{ border-radius: 3px;   box-shadow: 0 0 4px 4px #000;  padding: 3px; display: block;}
        }

         .srv-txt{
            padding-left: 30px;
            padding-right: 30px;
         }
    }

    .hm-service{
       

        .srv-txt{
            padding-left: 15px;
            padding-right: 15px;
            margin-bottom: 30px;

            .s-item{
                transition: 0.3s;
                padding: 20px 20px; 
                background: #3ac5ef26;
                height: 100%;

                .sv-icn{
                    background: #0d99a714;
                    display: inline-block;
                    padding: 6px 1px 5px 1px;
                    margin-bottom: 15px;
                    border-radius: 7px;
                    text-align: center;
                    width: 50px;
                    height: 45px;
                }
            }

            .s-item:hover{
                /* box-shadow: 0 0 10px rgb(0 170 255 / 50%);   */
                /* transform: scale(1.02, 1.04); */

                transform: translateY(-3px) scale(1.02);
                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

            }

            .pg{ line-height: 1.7;}
        }
    }



    #contact-sec{       
        background: linear-gradient(to bottom right, #093954, #136b9f);
        color: #ffffff;

        .pg{
            max-width: 800px;
            margin: auto;
            margin-bottom: 20px;
        }


        .intro-column{
            .intro-d{
                align-items: center;

                .icn-d{
                    background: #FFFFFF1A;
                    border-radius: 4px;
                    text-align: center;
                    padding: 10px 15px;
                    width: 50px;
                    margin-right: 20px;
                
                }
            }

            .icn-b{
                background: #FFFFFF1A;
                border-radius: 4px;
                text-align: center;
                padding: 10px 5px;
                width: 40px;
                margin-right: 10px;
                border: none;
                color: #ffffff;
                
            }
        }


        .fdiv{
            background-color: #FFFFFF1A;
            padding: 30px 30px;
            border-radius: 16px;

            form{

                .f-lbl{
                    display: block;
                    margin-bottom: 5px;
                }

                .f-inp{
                    display: block;
                    background-color: #FFFFFF33;
                    padding: 5px 5px;
                    border: 1px solid #FFFFFF4D;
                    width: 100%;
                    border-radius: 4px;
                    outline: none;
                    height: 45px;
                    color: #ffffff;
                    margin-bottom: 20px;
                }

                input::placeholder, textarea::placeholder {
                    color: #ffffff;
                }

                select{
                    display: block;
                    background-color: #FFFFFF33;
                    padding: 5px 5px;
                    border: 1px solid #FFFFFF4D;
                    width: 100%;
                    border-radius: 4px;
                    outline: none;
                    height: 45px;
                    margin-bottom: 20px;

                    option{
                        color: #000000;
                    }
                }

                textarea{
                    display: block;
                    background-color: #FFFFFF33;
                    padding: 5px 5px;
                    border: 1px solid #FFFFFF4D;
                    width: 100%;
                    border-radius: 4px;
                    outline: none;
                    color: #ffffff;
                    margin-bottom: 25px;                   
                }


                .f-btn{
                    display: block;
                    background: linear-gradient(to bottom right, #093954bf, #3596cfbf);
                    padding: 15px 5px;
                    border: none;
                    width: 100%;
                    border-radius: 4px;
                    outline: none;
                    color: #ffffff;
                    margin-bottom: 15px;    
                    font-size: 18px;        
                }


            }

        }


    }


   
}







@media (min-width: 768px) {

     #home-pg{


        .banner-div{               
            height: 715px;
            background-image: url('/public/images/bg-banner.png'); 
        }

        .hm-service{
            .srv-img-1{
                padding-right: 50px;
            }

            .srv-img-2{
                padding-left: 50px;
            }
        }

        .choose-dv{ margin-top: 20px;}
     }

}


@media (max-width: 768px) {

    #home-pg{


        .banner-div{
             background-image: url('/public/images/bg-banner-mb.png'); 
            background-size: cover;
            background-position: center;
            padding: 20px 15px;

            .text-left{
                
                h2{
                    font-size: 28px;
                }

                p{
                    font-size: 16px;
                }

                .btn-dv{
                    
                    .btn{
                        width: 170px;                       
                        margin-right: 7px;      
                        font-size: 14px;              
                       
                    }
                }
            }       

        }



        .choose-dv{
            margin-top: 20px;

            .box{
                margin-bottom: 15px;
            }

        }

        .hm-service {
            .srv-img-1 {
                margin-bottom: 15px;
            }

        }
    }

}