/*
Theme Name: Royal Elementor Kit Child
Theme URI: http:/example.com
Description: Child theme for the Royal Elementor Kit theme
Author: Your Name
Author URI: http:/example.com
Template: royal-elementor-kit
Version: 1.0.0
*/

/* Import the parent theme styles */





.hear {}
.hear .bx {position:relative; width:100%; min-height:450px; border-radius: 20px; overflow: hidden; background-color: #ffffff; transition: 0.5s;}
.hear .bx .t1 {position:absolute; top:0px; left:0px; background: url(/wp-content/themes/royal-elementor-kit-child/images/tr1.png) no-repeat 0px 0px; width:100px; height: 100%; background-size:100%;}
.hear .bx .t2 {position:absolute; bottom:0px; left:15px; background: url(/wp-content/themes/royal-elementor-kit-child/images/tr2.png) no-repeat 0px 0px; width:140px; height: 70px; background-size:100%;}
.hear .bx .qt {position:absolute; top:30px; right:30px; width: 60px;}
.hear .bx .qt img {width:100%; display: block;}
.hear .bx .qt img:nth-child(2) {position: absolute; top:0px; right:0px; width:30px; display: block; opacity:0; transition: 0.5s;}
.hear .bx .tp {position:absolute; top:30px; left:110px;}
.hear .bx .tp .ct {border:1px solid #D3D3D3; border-radius:10px; width:100px; background-color: #ffffff; transition: 0.5s;}
.hear .bx .tp .pd {padding:20px; transition: 0.5s;}
.hear .bx .tp .pd img {width:100%; display: block;}
.hear .bx .tp .nm {font-family: "Century Gothic"; font-size: 40px; line-height: 1.2; color:#ffffff; font-weight: 700; text-transform: uppercase; padding:10px 0px; opacity: 0; transition: 0.5s;}
.hear .bx .bt {padding:180px 40px 40px 110px;}
.hear .bx .bt .st {width:90px; margin-bottom:16px;}
.hear .bx .bt .st img {width:100%; display: block;}
.hear .bx .bt .tx {font-family: "Century Gothic";
    font-size: 15px;
    line-height: 1.4;
    color: #4d4d4d;
    transition: 0.5s;
    min-height: 300px;
    height: 200px;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: visible;}

.hear .bx:hover {background-color: #376B67;}
.hear .bx:hover .t1 {background-image: url(/wp-content/themes/royal-elementor-kit-child/images/tr1_hover.png);}
.hear .bx:hover .t2 {background-image: url(/wp-content/themes/royal-elementor-kit-child/images/tr2_hover.png);}
.hear .bx:hover .bt .tx {color:#ffffff;}
.hear .bx:hover .tp .ct {width:42px;}
.hear .bx:hover .tp .pd {padding:6px;}
.hear .bx:hover .tp .nm {opacity: 1;}
.hear .bx:hover .qt img:nth-child(2) {opacity:1;}



.approach .grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.approach .bx {position:relative; width:100%; max-width: 500px; min-height:190px; border-radius: 20px; overflow: hidden; background:url(/wp-content/themes/royal-elementor-kit-child/images/approach_pic1.jpg) no-repeat center center; background-size: cover; padding:70px 20px 20px 35px; margin: 0px auto;}
.approach .bx .bg {position: absolute; top:0px; left:140px; width: 100%; height:100%; transition: 0.5s; transition-timing-function: cubic-bezier(.69,-0.33,.33,1.29);}
.approach .bx .bg2 {position: absolute; top:0px; left:0px; width: 100%; height:100%; background-color: rgba(0,0,0,0.6); opacity: 0; transition: 0.5s; transition-timing-function: cubic-bezier(.69,-0.33,.33,1.29);}
.approach .bx .bg img {display: block; height: 100%;}
.approach .bx .ic {position: absolute; top:50%; left:30px; transform: translateY(-50%); width: 80px; transition: 0.5s; transition-timing-function: cubic-bezier(.69,-0.33,.33,1.29);}
.approach .bx .ic img {width: 100%; display: block;}
.approach .bx .tl {position: absolute; top:50%; left:220px; transform: translateY(-50%); font-family: "Handel Gothic", Sans-serif; color:#ffffff; font-size: 24px; line-height: 25px; text-transform: uppercase; transition: 0.5s; transition-timing-function: cubic-bezier(.69,-0.33,.33,1.29);}
.approach .bx .tx {position: relative; font-family: "Century Gothic"; font-size: 14px; line-height: 1.5; color:#ffffff; opacity:0; transition: 0.5s; transition-timing-function: cubic-bezier(.69,-0.33,.33,1.29);}
.approach .bx:nth-child(2) {background-image: url(/wp-content/themes/royal-elementor-kit-child/images/approach_pic2.jpg);}
.approach .bx:nth-child(3) {background-image: url(/wp-content/themes/royal-elementor-kit-child/images/approach_pic3.jpg);}

.approach .bx:hover .bg {left:-60px; opacity: 0;}
.approach .bx:hover .ic {top:20px; left:35px; transform: none; width: 35px;}
.approach .bx:hover .tl {top:25px; left:90px; transform: none;}
.approach .bx:hover .bg2 {opacity: 1;}
.approach .bx:hover .tx {opacity:1;}

.hear ::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.hear ::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
.hear ::-webkit-scrollbar-thumb {
  background: #6f8c93; 
}

/* Handle on hover */
.hear ::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
@media (max-width: 767px) {
.hear .bx .bt {
    padding: 150px 40px 20px 110px;
}
.hear .bx{
	min-height:auto;
}
}
