@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
.monitoring{display:flex;flex-direction:column;gap:48px}
.monitoring .banner{border-radius:24px;overflow:hidden;position:relative;width:100%;height:400px;display:flex;align-items:center;justify-content:flex-start;padding:50px;background:url("/storage/app/media/images/landings/smart/monitoring/fiz.jpg") no-repeat center right;background-size:60% auto;background-color:#001D33}
.monitoring .banner::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,#001D33 40.6%,rgba(0,29,51,0) 65.56%);z-index:1}
@media screen and (max-width:768px){.monitoring .banner{height:auto;padding-left:20px;background-size:auto 100%;border-radius:16px;background:url("/storage/app/media/images/landings/smart/monitoring/fiz.jpg") no-repeat center top /cover;background-size:100% auto;padding-top:50%;background-color:#001D33}.monitoring .banner::before{background:linear-gradient(0deg,#001D3350 4.23%,#001D33 40.4%,rgba(135,134,134,0) 70.68%)}}
.monitoring .banner .banner-content{border-radius:24px;color:white;text-shadow:2px 2px 4px rgba(0,0,0,0.7);position:relative;z-index:2;display:flex;flex-direction:column;height:100%;justify-content:space-between;width:50%}
.monitoring .banner .banner-content h1{color:#FFF;font-family:"Roboto Flex","Roboto ",sans-serif;font-size:40px;font-style:normal;font-weight:900;line-height:130%;text-transform:uppercase}
@media screen and (max-width:768px){.monitoring .banner .banner-content h1{font-size:2rem}}
@media screen and (max-width:400px){.monitoring .banner .banner-content h1{font-size:1rem}}
.monitoring .banner .banner-content h2{color:#FFF;text-align:start;font-family:"Montserrat",sans-serif;font-size:24px;font-style:normal;font-weight:400;line-height:130%;text-wrap:wrap;text-align:start !important}
@media screen and (max-width:768px){.monitoring .banner .banner-content h2{margin-top:10px;margin-bottom:20px;letter-spacing:2px;font-size:0.7rem}}
@media screen and (max-width:400px){.monitoring .banner .banner-content h2{letter-spacing:2px}}
.monitoring .banner .banner-content a.btn.btn-info{font-family:"Inter",sans-serif;background-color:#007bff;border-radius:12px;width:175px;color:white;border:none;padding:10px 20px;font-size:20px;cursor:pointer}
@media screen and (max-width:768px){.monitoring .banner .banner-content a.btn.btn-info{padding:8px 16px;font-size:0.9rem;margin-right:10px}}
.monitoring .banner .banner-content a.btn.btn-info:hover{background-color:#0056b3}
@media screen and (max-width:768px){.monitoring .banner .banner-content{width:100%}}
.monitoring h2{color:var(--IDC-Primary-Navy-9,#001D33);font-family:"Montserrat",sans-serif;font-size:36px;font-style:normal;font-weight:600;line-height:normal;letter-spacing:0.48px;margin-bottom:36px}
@media screen and (max-width:768px){.monitoring h2{font-size:24px}}
.monitoring .cards{display:flex;flex-direction:row;gap:24px;align-items:stretch !important}
@media screen and (max-width:768px){.monitoring .cards{flex-direction:column;gap:16px}}
.monitoring .cards .card-item{background:white;flex:1;flex-direction:row;color:#001D33;font-family:"Inter",sans-serif;font-size:24px;font-style:normal;font-weight:700;line-height:150%;border-radius:16px;padding:24px;display:flex;gap:10px;height:auto}
@media screen and (max-width:768px){.monitoring .cards .card-item{font-size:16px}}
.monitoring .cards .card-item svg{width:50px;height:50px;flex-shrink:0}
.monitoring .cards .arrow{align-self:center}
@media screen and (max-width:768px){.monitoring .cards .arrow{transform:rotate(90deg)}.monitoring .cards .arrow svg{width:52px;height:auto}}
.monitoring .for-whom .cards{gap:36px;flex-direction:row}
@media screen and (max-width:768px){.monitoring .for-whom .cards{flex-direction:column}.monitoring .for-whom .cards div{text-align:center}}
.monitoring .whom-card{aspect-ratio:1;width:100%;border-radius:16px;padding:24px;position:relative;background-size:cover;display:flex;flex-direction:column;justify-content:end;overflow:hidden}
.monitoring .whom-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,rgba(0,0,0,0) 40.66%,#0090FF 99.94%);z-index:1}
.monitoring .whom-card h3{z-index:20;color:white;font-weight:900}
.monitoring .whom-card p{color:white;z-index:20}
.monitoring .tariffs .cards{flex-direction:row}
@media screen and (max-width:768px){.monitoring .tariffs .cards{flex-direction:column}}
@media screen and (max-width:768px){.monitoring .tariffs .cards .card-item h4{font-size:16px;padding:8px}}
.monitoring .tariffs .cards .card-item h5{font-family:Inter,sans-serif;font-size:24px;font-style:normal;font-weight:800}
@media screen and (max-width:768px){.monitoring .tariffs .cards .card-item h5{font-size:16px}}
.monitoring .tariffs .cards .card-item .li{display:flex;gap:10px;align-items:center}
.monitoring .tariffs .cards .card-item .li p{font-family:Inter,sans-serif;font-size:16px;font-style:normal;font-weight:700;padding:0;margin:0}
@media screen and (max-width:768px){.monitoring .tariffs .cards .card-item .li p{font-size:12px}}
.monitoring .tariffs .cards .card-item .li .exclude{height:24px;width:24px;padding:0;margin:0}
.monitoring .tariffs .cards .card-item .li svg{height:unset;width:unset}
@media screen and (max-width:768px){.monitoring .apps svg{width:100%;height:auto}}
.monitoring .form .banner-form{border-radius:24px;background:#001D33 url("/storage/app/media/images/landings/smart/monitoring/faq.png") no-repeat calc(100% - 50px) center / contain;color:white;display:flex;justify-content:space-between;padding:50px}
.monitoring .form .banner-form h4{font-family:Inter,sans-serif;font-size:36px;font-weight:900;text-transform:uppercase}
.monitoring .form .banner-form p{font-size:18px;margin-bottom:36px}
.monitoring .form .banner-form button{text-align:center;width:100%;max-width:330px;border-radius:8px;background:var(--IDC,#0090FF)}
.monitoring .form .modal-dialog{width:100%;max-width:600px}
.monitoring .form .modal-dialog .modal-body{padding:40px 40px}
.monitoring .form .modal-dialog .modal-header{padding:20px 40px}
@media screen and (max-width:768px){.monitoring .form .modal-dialog .d-flex{flex-direction:column}}
.monitoring .form .modal-dialog .form-label{font-family:"Inter",sans-serif;font-size:16px}
.monitoring .form .modal-dialog button{border-radius:8px}
.monitoring .form .modal-dialog input.form-control{border-radius:8px;border:1px solid var(--Sky-Light,#E3E5E5);background:var(--Sky-White,#FFF);padding:12px;font-size:14px}
.monitoring .form .modal-dialog input.form-control::placeholder{color:rgba(128,128,128,0.5)}
.monitoring .accordion-button{margin-top:12px;padding:8px 16px;background:#fff;border-radius:16px;font-family:Inter,sans-serif;font-weight:700;font-size:16px}
.monitoring .accordion-button:after{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")}
.monitoring .accordion-body{border-radius:16px;font-family:Inter,sans-serif;line-height:normal}