/* *{border:1px solid #00000019;} */
.card_1 p { font-size: 15px; }

/* ====================nav_scroll_spy=============================== */
.nav_scroll_spy { background-color: #0061b8; }
.nav_scroll_spy a.nav-link { color: #fff; }
.nav_scroll_spy .nav-pills .nav-link.active, .nav_scroll_spy .nav-pills .nav-link:hover, .nav_scroll_spy .nav-pills .show>.nav-link {
    color: #000;
    background-color: var(--light_green);
}
.nav_scroll_spy .navbar-brand,
.nav_scroll_spy .fa-chevron-down:before{
  color: #fff;}

/* ====================banner=============================== */
.banner{ background-image: linear-gradient( 135deg, rgb(40,119,226) 0%, rgb(109,188,224) 100%); padding: 180px 0 0px 0;}
.banner .section_img img { margin-left: 160px; }
.banner .section_text h1,.banner .section_text p { color: #fff; }
.banner .section_text h1{margin-bottom: 0;}
.banner .section_img { justify-content: center; margin-top: 0px;}
.banner .section_text { text-align: center; padding-left: unset; margin-top: unset;}
.banner .section_text p { margin: auto; max-width: 40ch;}

.banner .design_1{ top: 20px; left: 150px; }
.banner .design_2{ bottom: 220px; left: 0px ; }
.banner .design_3{ top: 380px; right: 10px; }


/* ====================what_is=============================== */
.what_is_ai{
  overflow-x: hidden;
  padding: 70px 0;
}
.what_is_ai .container{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.what_is_ai .design_1{ left: 330px; top: -30px; }
.what_is_ai .design_2{ left: -40px; top: 70px; }
.what_is_ai .design_3{ right: -10px; bottom: 30px; }
.what_is_ai .section_p {
  text-align: center;
  max-width: 85ch;
}
.what_is_ai .btn_div {
  margin-top: 20px;
}


/* ====================how_it_works=============================== */
.how_it_works {
  padding-bottom: 50px;
  background: linear-gradient( 135deg, rgb(40,119,226) 0%, rgb(109,188,224) 100%);
}
.how_it_works .row{
  padding-bottom: 30px;
}
.how_it_work_card{
  height: 80%;
}

/* ====================advantages=============================== */
.advantages { 
  padding-top: 32px; 
  overflow-x: hidden;
}
.advantages .card_1 p { max-width: 53ch; font-size: 16px; }
.advantages .card_1 h6 { 
  margin-top: 20px;
}
.advantages .card_container { 
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 20px; 
  padding: 60px 0px 40px;
}
.advantages .img_div_1{margin-left: 0;}
.advantages .design_1{top: -10px; left: -20px;}
.advantages .design_2{top: -20px; right: -80px;}
.advantages .design_3{bottom: 60px; left: 150px;}

/* ====================features=============================== */
.features{ background-image: linear-gradient( 180deg, rgb(210,239,253) 0%, rgb(255,255,255) 100%); }
.call_center .card_container,.features .card_container {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 30px;
}
.features .card_container { padding: 28px 10px 48px 10px; }
.features .img_div_1 { justify-content: flex-start; }
.features .card_1 .img_div_1 {
    flex: unset;
    height: 97px;
}
.features .card_1 {
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0px 3px 26.97px 2.03px #00000019;
}
.features .card_1 h6{margin-top: 12px;}
.features .card_1:hover{
    box-shadow: 0px 3px 26.97px 2.03px #00000025;
}
.features .card_1:hover .card_title h6{ color: var(--text_blue); }
.features .card_title {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
}


/* ====================call_center=============================== */
.call_center{padding-top: 40px;}
.call_center .bg_container{
  background: linear-gradient( 315deg, rgba(129,222,118,.96) 0%, rgba(55,165,247,.96) 100%), url(../png/auto_dialer_for_call_center_bg.png) no-repeat center / cover;
  padding: 20px 0;
  margin-top: 55px;
}
.call_center .card_container { padding: 12px 0; }
.call_center .card_1:hover{ border-radius: 20px; }
.call_center .card_1:hover{ box-shadow: 0 0 10px 2px #00000019; }
.call_center .img_div_1{
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0px 14px 8.37px 0.63px rgba(0, 0, 0, 0.1);
  width: 138px;
  height: 138px;
  margin-bottom: 20px;
}
.call_center .card_1 p { margin-bottom: 0; }
.call_center .card_1 h6, .call_center .card_1 p{color: #fff;}


/* ====================go_to_ivr_blog=============================== */
.e_book{
  background-image: linear-gradient( 315deg, rgb(169,226,251) 0%, rgb(0,108,254) 100%);
  padding: 20px 110px;
  overflow-x: hidden;
}
.e_book p{ font-size: 23px; color: #fff; margin-top: 14px; }
.e_book .design_1 { left: -180px; top: -10px; }
.e_book .section_title_1 { margin-top: 50px; }
.e_book .design_2{left: 100%; top: 0px;}

/* ====================media_queries=============================== */
@media only screen and (max-width:1025px){
.banner .section_text{padding: 0;}
.banner .section_img img { margin-left: 80px; }
.banner .design_1 { left: 0px; transform: scale(.5); }
.banner .design_2 { right: 0px;}
.what_is_ai .design_1{top: 0px;}
.what_is_ai .design_2 { left: 30px; top: 160px; }
.advantages .card_1 p { max-width: 80%; }
.advantages .card_container { padding: 50px 40px 40px; }
.advantages .img_div_1 { margin-bottom: -10px; }
.call_center .card_container, .features .card_container { grid-template-columns: 1fr; width: 80%; margin: auto; }
.call_center .img_div_1 { width: 118px; height: 118px; }
.features .card_title { margin-bottom: 0px; }
.cloudshope_smartphone_app { position: static; transform: none; }
.e_book { padding: 20px 12px 40px; }

.how_it_work_card { height: unset; }
.what_is_ai .design_2 { left: 0px; top: 130px; }
.what_is_ai .design_1 { top: -50px; }
.what_is_ai .design_3 { right: -20px; bottom: 0px; }
.advantages .design_3 { bottom: 10px; left: 0px; }
}

@media only screen and (max-width:767px){
.banner { padding: 160px 0 0px 0; }
.banner .section_img img { margin-left: 0px; }
.what_is_ai { padding: 30px 0; }
.what_is_ai .section_p { max-width: 90%; }
.advantages .card_container { padding: 20px 40px 40px; gap: 14px 20px; }
.advantages .card_1 { margin-bottom: 12px; }
.advantages .card_1 p { max-width: unset; font-size: 14px; }
.features .card_container { padding: 8px 10px; }
.features .card_1 .img_div_1{margin-left: 0px;}
.features .card_title { flex-direction: column; }
.features .card_1 p { font-size: 14px; }
.call_center .card_container, .features .card_container { width: auto; }
.call_center .img_div_1 { width: 108px; height: 108px; }
}