#videocarousel{
     -webkit-box-align: center;
     -webkit-align-items: center;
        -moz-box-align: center;
         -ms-flex-align: center;
                 -ms-grid-row-align: center;
             align-items: center;
     position: relative;
    /* background-color: #F3F3F3;
     */
}
 #videocarousel .videocarousel{
     width: 50%;
     padding: 4.323rem 3.097rem 4.323rem 1.097rem;
     position: relative;
}
 #videocarousel:before {
     background-color: #F3F3F3;
     -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
             border-radius: 100%;
     content: '';
     aspect-ratio: 9/9;
     position: absolute;
     width: 100svw;
     height: 100svw;
     top: 0;
     right: -33.33svw;
     bottom: 0;
     margin: auto;
     z-index: -2;
     opacity: .5;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
 #videocarousel .videocarousel:before {
     background-color: #F3F3F3;
     -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
             border-radius: 100%;
     content: '';
     aspect-ratio: 9/9;
     position: absolute;
     width: 80svw;
     height: 80svw;
     top: 0;
     right: -30svw;
     bottom: 0;
     margin: auto;
     z-index: -2;
}
 #videocarousel .videocarousel:after {
     background-color: #0936F4;
     -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
             border-radius: 100%;
     content: '';
     aspect-ratio: 9/9;
     position: absolute;
     width: 27svw;
     height: 27svw;
     top: -10svw;
     right: 7svw;
     bottom: 0;
     margin: auto;
     z-index: -1;
}
 #videocarousel .text{
     width: 50%;
     padding: 4.323rem 3.097rem;
}
 #videocarousel .swiper-slide{
     width: 80%;
     padding: 3rem 0;
     background-color: #000;
}
 #videocarousel .swiper-slide div{
     aspect-ratio: 16/9;
     display: block;
     background-position: center;
     background-repeat: no-repeat;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
     /* max-width: 30.968rem; */
     cursor: pointer;
     width: 100%;
}
 #videocarousel .swiper-slide div span {
     width: auto;
     -webkit-border-radius: 100%;
     -moz-border-radius: 100%;
     border-radius: 100%;
     background: -webkit-linear-gradient(45deg,#2984BD 0%,#0936F5 100%);
     background: -moz-linear-gradient(45deg,#2984BD 0%,#0936F5 100%);
     background: -o-linear-gradient(45deg,#2984BD 0%,#0936F5 100%);
     background: linear-gradient(45deg,#2984BD 0%,#0936F5 100%);
     display: -webkit-inline-box;
     display: -webkit-inline-flex;
     display: -moz-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     -webkit-box-align: center;
     -webkit-align-items: center;
     -moz-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     padding: .4rem;
     vertical-align: middle;
     position: absolute;
     top:0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
     width: 3rem;
     height: 3rem;
     z-index: 12;
}
 #videocarousel .swiper-slide div span svg {
     float: left;
     width: 1.5rem;
     height: 1.5rem;
     z-index: 2;
     position: relative;
}
 #videocarousel .swiper-slide div span svg path{
     fill: #ffffff;
}
 #videocarousel .swiper-slide div i{
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
         -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
             transform: translate(-50%, -50%);
     width: 10rem;
     height: 10rem;
     background-color: rgba(255,255,255,0.13);
     -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
             border-radius: 100%;
     z-index: 10;
     opacity: 0;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     pointer-events: none;
     -webkit-transition: opacity 1s ease, width 1s ease, height 1s ease;
     -o-transition: opacity 1s ease, width 1s ease, height 1s ease;
     -moz-transition: opacity 1s ease, width 1s ease, height 1s ease;
     transition: opacity 1s ease, width 1s ease, height 1s ease;
}
 #videocarousel .swiper-slide div i:before{
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
         -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
             transform: translate(-50%, -50%);
     width: 6rem;
     height: 6rem;
     background-color: rgba(255,255,255,0.23);
     z-index: 10;
     opacity: 0;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     pointer-events: none;
     -webkit-transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
     -o-transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
     -moz-transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
     transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
     -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
             border-radius: 100%;
}
 #videocarousel .swiper-slide div:hover i, #videocarousel .swiper-slide div:hover i:before {
     opacity: 1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
 #videocarousel .swiper-slide div:hover span{
     background: #0936F5;
     background: -moz-linear-gradient(45deg,#0936F5 0%,#2984BD 100%);
     background: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#0936F5),color-stop(100%,#2984BD));
     background: -webkit-linear-gradient(45deg,#0936F5 0%,#2984BD 100%);
     background: -o-linear-gradient(45deg,#0936F5 0%,#2984BD 100%);
     background: linear-gradient(45deg,#0936F5 0%,#2984BD 100%);
}
 #videocarousel .swnav {
     position: relative;
     -webkit-box-align: center;
     -webkit-align-items: center;
        -moz-box-align: center;
         -ms-flex-align: center;
                 -ms-grid-row-align: center;
             align-items: center;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
        -moz-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
}
#reviews .swnav{
     display: -webkit-inline-box;
     display: -webkit-inline-flex;
     display: -moz-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     width: 100%;
     -webkit-box-pack: end;
     -webkit-justify-content: end;
        -moz-box-pack: end;
         -ms-flex-pack: end;
             justify-content: end;
}
 #videocarousel .swnav div, #reviews .swnav div{
     position: relative;
     margin: 1rem;
     width: auto;
     -webkit-border-radius: 100%;
     -moz-border-radius: 100%;
     border-radius: 100%;
     border: 1px solid #D1D1D1;
     display: -webkit-inline-box;
     display: -webkit-inline-flex;
     display: -moz-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     -webkit-box-align: center;
     -webkit-align-items: center;
     -moz-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     padding: .5rem;
     background-color: #D1D1D1;
     -webkit-transition: margin 0.1s ease, padding 0.1s ease;
     -o-transition: margin 0.1s ease, padding 0.1s ease;
     -moz-transition: margin 0.1s ease, padding 0.1s ease;
     transition: margin 0.1s ease, padding 0.1s ease;
     cursor: pointer;
     z-index: 1;
}
 #videocarousel .swnav div:hover, #reviews .swnav div:hover{
     background-color: #0936F4;
     border: 1px solid #0936F4;
}
 #videocarousel .swnav div svg, #reviews .swnav div svg{
     width: 1.3rem;
     height: 1.3rem;
}
 #videocarousel .swnav div svg path, #reviews .swnav div svg path{
     fill: #000;
}
 #videocarousel .swnav div:hover svg path, #reviews .swnav div:hover svg path{
     fill: #ffffff;
}

#whyme {
  background-image: url('/static/theme/img/wedding.webp'); /* Замените на ваше фоновое изображение */
  -moz-background-size: cover;
    -o-background-size: cover;
       background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100svh;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}
#whyme:before {
background-color: #F3F3F3;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
content: '';
aspect-ratio: 9/9;
position: absolute;
width: 140svh;
height: 140svh;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
z-index: 0;
opacity: .5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
#whyme .circle {
  position: relative;
  height: 100svh;
  width: 100svh;
  z-index: 1;
  text-align: center;
}
#whyme .circle svg{
     width: 100%;
     height: 100%;
     min-width: 320px;
     max-width: 1024px;
     position: relative;
}
#whyme g{
     cursor: pointer;
     position: relative;
     z-index: 1;
}
#whyme g .minicircleshadow{
     fill: transparent;
}
#whyme g .minicircle{
     fill: #000;
}
#whyme g .icon{
     fill: #ffffff;
}
#whyme g:hover .minicircleshadow, #whyme g.active .minicircleshadow{
     fill: rgba(232,232,232,0.13);
}
#whyme g:hover .minicircle, #whyme g.active .minicircle{
     fill: #0936F4;
}
#whyme .center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
padding: 0 28%;
z-index: 0;
}
#whyme .center-text h6{
     margin-top: 2rem;
     margin-bottom: 0;
     
}
#reviews{
     position: relative;
     background-color: #1F1F1F;
}
#reviews h3 {
     font-size: 3.097rem;
     line-height: 3.3rem;
     color: #ffffff;
     background-color: #000;
     padding: 1.806rem 3.097rem;
     margin: 0;
     position: absolute;
     z-index: 2;
     right: 0;
}
#reviews .wrap{
     -webkit-box-align: center;
     -webkit-align-items: center;
        -moz-box-align: center;
         -ms-flex-align: center;
                 -ms-grid-row-align: center;
             align-items: center;
}
#reviews .image{
     width: 50%;
     height: 100%;
     display: -webkit-inline-box;
     display: -webkit-inline-flex;
     display: -moz-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     background-position: top center;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
     background-repeat: no-repeat;
     aspect-ratio: 9/9;
}
#reviews .text{
     width: 45%;
     padding: 7.097rem 4.323rem 4.323rem;
     position: relative;
}
#reviews .text:before {
background-color: #1F1F1F;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
content: '';
aspect-ratio: 9/9;
position: absolute;
width: 150svh;
height: 150svh;
top: 0;
right: 0;
left: -25svh;
bottom: 0;
margin: auto;
z-index: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
#reviews .text:after {
background-color: rgb(68, 68, 68);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
content: '';
aspect-ratio: 9/9;
position: absolute;
width: 115svh;
height: 115svh;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
z-index: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
#reviews .text h4, #reviews .text p, #reviews .text a, #reviews .text small{
     position: relative;
     z-index: 1;
     color: #ffffff;
     display: block;
}
#reviews .text a{
     font-size: 1.226rem;
     color: #939393;
}
#reviews .text a:hover{
     color: #ffffff;
}
@media only screen and (max-width: 1274px){
     #videobanner .description .butns {
      -webkit-box-pack: start;
      -webkit-justify-content: start;
         -moz-box-pack: start;
          -ms-flex-pack: start;
              justify-content: start;
    }
    #whyme:before {
          width: 110svh;
          height: 110svh;
     }
     #reviews .image {
          width: 100%;
     }
      #reviews .text:before {
    width: 120svw;
    height: 120svw;
    left: 0;
    -webkit-transform: translateX(-10svw) translateY(-20svw);
       -moz-transform: translateX(-10svw) translateY(-20svw);
        -ms-transform: translateX(-10svw) translateY(-20svw);
         -o-transform: translateX(-10svw) translateY(-20svw);
            transform: translateX(-10svw) translateY(-20svw);
  }
     #reviews .text:after {
          width: 85svw;
          height: 85svw;
     }
     #reviews .text {
          width: 100%;
          text-align: center;
          padding: 0 7rem 5rem;
     }
     #reviews .swnav {
          -webkit-box-pack: center;
          -webkit-justify-content: center;
             -moz-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          margin-top: 1rem;
     }
     #reviews .image {
          aspect-ratio: 9/16;
     }
}
@media only screen and (max-width: 1000px){
     #whyme:before {
          width: 90svw;
          height: 90svw;
     }
     #videocarousel .text {
        padding: 4.323rem 3.097rem 4.323rem 1.097rem;
     }
}
@media only screen and (max-height: 630px), only screen and (max-width: 830px) {
     #videocarousel .videocarousel, #videocarousel .text, #reviews h3 {
        width: 100%;
    }
    #videocarousel .videocarousel {
        width: 100%;
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
           -moz-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
        padding: 1.323rem 1.097rem;
    }
    #videocarousel .text {
        width: 100%;
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
           -moz-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
        padding: 1.323rem 1.097rem;
    }
    #reviews .text{
     padding: 1.323rem 1.097rem;
    }
    #reviews h3 {
        font-size: 1.571rem;
    }
    #reviews .text, #reviews .text .animate__slideInRight{
     -webkit-animation-name: none!important;
        -moz-animation-name: none!important;
          -o-animation-name: none!important;
             animation-name: none!important;
    }
    #whyme .center-text h6 {
          margin-top: 1rem;
          font-size: 1rem;
          line-height: 1.157rem;
     }
     /* #whyme .center-text {
          width: 50svw;
          padding: 0;
     } */
}
@media only screen and (max-width: 400px){
     #reviews h3 {
    padding: 0.806rem 1.097rem;
  }
  #reviews .text{
    padding: 1.323rem 1.097rem;
  }
}