/* slider styles   */
  .slideshow-container .column {
    float: left;
/*    width: 50%;*/
    }
    /* Clear floats after the columns */
    .slideshow-container .row:after {
    content: "";
    display: table;
    clear: both;
    } 
    .slideshow-container.row{
    margin: 0 auto;
    }
    .mySlides {display: none}
    /* Slideshow container */
    .slideshow-container {
    position: relative;
    margin: auto;
    margin: 50px 0px;
    }
    /* Next & previous buttons */
    a.prev, a.next {
    cursor: pointer;
    position: absolute;
    top: 21%;
    width: auto;
    font-weight: bold;
    transition: 0.6s ease;
    user-select: none;
    background: #F3F3F3;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    text-align: center;
    line-height: 1.8em !important;
    padding: 0px !important;
    color: #d0d0d0 !important;
    font-size: 26px !important;
    }
    /* Position the "next button" to the right */
    .next {
    right: -10%;
    }
    /* The dots/bullets/indicators */
    .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #b19f9f;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    border: 1px solid;
    }
    .active, .dot:hover {
    background-color: #fff;
    }
    /* Caption text */
    .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
    }
    /* Number text (1/3 etc) */
    .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    }
    /* Fading animation */
    .fade {
    animation-name: slide;
    animation-duration: 1.5s;
    }
    @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
    }
    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
    .prev, .next,.text {font-size: 11px}
    }
    .mySlides{
    text-align: center;
    }
    .mySlides .photo{
    display: inline-block;
    padding: 0px 35px;
    color:#fff;
    font-size: 18px;
    vertical-align: top;
    /*    margin-top: 2%;*/
    }
    .mySlides .description{
    display: inline-block;
    padding: 0px;
    color: #646464;
    font-size: 23px;
    text-align: right;
    width: 100%;
    min-height: 137px;
    }
    .prev{
    left: -10%;
    }
    .mySlides .photo img{
    border-radius: 50%;
    }
    @media(max-width:855px){

    .mySlides .description {
    padding: 29px 0px;    
    }
    .slideshow-container {
    padding: 0px 1%;
    }
    }
/*end of slider styles    */
/* slider2 styles2   */
  .slideshow-container2 .column2 {
    float: left;
/*    width: 50%;*/
    }
    /* Clear floats after the columns */
    .slideshow-container2 .row2:after {
    content: "";
    display: table;
    clear: both;
    } 
    .slideshow-container2.row2{
    margin: 0 auto;
    }
    .mySlides2 {display: none}
    /* Slideshow container */
    .slideshow-container2 {
    position: relative;
    margin: auto;
    margin: 50px 0px;
        text-align: center;
    }
    /* Next & previous buttons */
    a.prev2, a.next2 {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    font-weight: bold;
    transition: 0.6s ease;
    user-select: none;
    background: #F3F3F3;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    text-align: center;
    line-height: 1.8em !important;
    padding: 0px !important;
    color: #d0d0d0 !important;
    font-size: 26px !important;
    }
    /* Position the "next button" to the right */
    .next2 {
    right: -10%;
    }
    /* The dots/bullets/indicators */
    .dot2 {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #b19f9f;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    border: 1px solid;
    }
    .active2, .dot2:hover {
    background-color: #fff;
    }
    /* Caption text */
    .text2 {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
    }
    /* Number text (1/3 etc) */
    .numbertext2 {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    }
    /* Fading animation */
    .fade2 {
    animation-name: slide;
    animation-duration: 1.5s;
    }
    @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
    }
    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
    .prev2, .next2,.text2 {font-size: 11px}
    }
    .mySlides2{
    text-align: center;
    }
    .mySlides2 .photo2{
    display: inline-block;
    padding: 0px 35px;
    color:#fff;
    font-size: 18px;
    vertical-align: top;
    /*    margin-top: 2%;*/
    }
    .mySlides2 .description2{
    display: inline-block;
    padding: 0px 1px;
    color: #646464;
    font-size: 32px;
    text-align: right;
    width: 100%;
    }
    .prev2{
    left: -10%;
    }
    .mySlides2 .photo2 img2{
    border-radius: 50%;
    }
    @media(max-width:855px){

    .mySlides2 .description2 {
    padding: 29px 0px;    
    }
    .slideshow-container2 {
    padding: 0px 1%;
    }
    }
/*end of slider2 styles    */ 
/* slider3 styles   */
    
  .mySlides3 {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container3 {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev3, .next3 {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #000;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next3 {
  left: 0;
  border-radius: 3px 0 0 3px;background: #F3F3F4;
    font-size: 26px;
    border-radius: 50%;
}
    .prev3{
        right: 0;background: #F3F3F4;
    font-size: 26px;
    border-radius: 50%;
    }

/* The dots/bullets/indicators */
.dot3 {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active3, .dot3:hover {
  background-color: #717171;
}

/* Fading animation */
.fade3 {
  animation-name: fade;
  animation-duration: 1.5s;
  text-align:center;
}
.imgpost3{
width:400px;
margin: 0 auto;
text-align: center;
}

@keyframes fade3 {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev3, .next3,.text3 {font-size: 11px}
}
/*end of slider3 styles    */    
    
    
    .Parent {
			display: flex;
			flex-direction: row;
/*            max-width: 1200px;*/
            margin: 0 auto;
/*            padding: 80px 0px;*/
            
		}

		.child1 {
            position: relative;
			width: 50%;
			color: white;
/*            background: url(https://rowadjourney.com/asset-v1:Riyali+102+Rowad+type@asset+block@nomo-bk.png);*/
/*            padding: 150px;*/
                        background-size: cover;
            background-repeat: no-repeat;
        }
        .child1 .txt1, .child2 .txt1{
            font-size: 45px;
            color: #F3F3F3;
        }
        .child1 .txt2 img, .child2 .txt2 img{
            max-width: 150px;
        }
         .child1 .txt2, .child2 .txt2
        {
            margin: 24px 0px;
        }
    
        .child1 .txt3,.child2 .txt3{
            color: #fff;
            font-size: 19px;
            min-height: 48px;
        }
        .child1 .txt4 a,.child2 .txt4 a{
        padding: 13px 35px;
        color: #056F6B;
        font-size: 18px;
        background: #F3F3F3;
            border-radius: 8px;
        }
        .child1 .txt4, .child2 .txt4{
            margin-top: 40px;
        }
		.child2 {
            position: relative;
/*            padding: 150px;*/
			width: 50%;
/*            background: url("/static/custom_css/${static.url('images/card2.png")}");*/
            background-size: cover !important;
            background-repeat: no-repeat !important;
		}
/*
        .child2 img{
			max-width: 560px;
		}
*/
 
        .section2{
            display: block;
            margin: 0 auto;
            background: #F3F3F3;
            padding: 80px 0px;
        }

        .section2 .sec2-desc{
            font-weight: bold;
            margin-bottom: 20px;      
            color: #00454B;
            font-size: 36px;
            font-weight: 700;
            
        }
        .section2 a{
            background: #C2514C;
            color: #fff !important;
            padding: 10px 62px;
            font-size: 22px !important;
            border-radius: 8px;
            margin-top: 15px;
        }
         .section2 a:hover{
            background: #DA9F47;
            }
    .desc0{
        font-weight: 400;
        font-size: 22px;
        padding: 50px 0px;
        text-align: right;
        width: 80%;

    }
    .section4{
        padding: 60px 0px;
    }
     .section4 .layer{
        min-height: 285px;
    }
    .section3{
        padding: 60px 0px;
    }
    .section3 .row .col1, .section3 .row .col2{
        display: inline-block;
        margin-left: 20px;
        vertical-align: top;
    }
    .section3 .title{
        font-size: 36px;
        font-weight: 700;
        color: #00454b;
        padding-bottom: 25px;
    }
    .section3 .title2{
        font-size: 36px;
        font-weight: 700;
        color: #646464;
        padding-bottom: 25px;
    }
    .section3 .col1 img{
        max-width: 260px;
    }
    .section3 .col2 .sub-titles{
        font-size: 22px;
        color: #646464;
        margin-right: 5px;
        margin-bottom: 25px;
        padding-right: 29px;
        position: relative;
    }
    .section3 .col2 .sub-titles .icon{
    position: absolute;
    right: -2px;
    top: -1px;
    }
    .section4 .title {
        font-size: 36px;
        font-weight: 700;
        color: #00454b;
    }
    .section4 .student{
        color:#056F6B;
        font-size: 20px;
            text-align: right;
    margin-top: 15px;
    }
    .divider{
        border-bottom: 3px solid #f3f3f3;
        display: block;
        height: 3px;
        width:100%;
    }
    .section5{
        background: url('https://rowadjourney.com/asset-v1:Riyali+102+Rowad+type@asset+block@MicrosoftTeams-image__82_.png');
        background-size: cover;
        min-height: 200px;
    padding:130px 0px;
    }
    .section5 .box-holder{
        max-width: 60%;
        margin: 0 auto;
    }
    .section5 .boxes{
        border-radius: 8px;
        background: #f3f3f3;
        width: 77%;
        margin-bottom: 50px;
        padding: 25px;
        font-size: 26px;
        color: #056F6B;
    }
        .section5 .boxes2{
            border-radius: 8px;
            background: #f3f3f3;
            width: 77%;
            padding: 25px;
            font-size: 26px;
            color: #056F6B;
            margin-right: 25%;
    }
    
    .section6{
        padding: 95px 0px;
    }
    .section6 .title{
        font-size: 32px;
        text-align: center;
        color: #f3f3f3;
        margin-bottom: 25px;
    }
    .section6 .box{
        background: #00454B;
        max-width: 900px;
        text-align: center;
        padding: 50px;
        color: #fff;
         margin: 0 auto;
    }

        .section6 .box .col1{
        display: inline-block;
            vertical-align: top;
        }
        .section6 .box .col1 img{
            max-width: 255px;
        }
        .section6 .box .col2{
        display: inline-block;
        vertical-align: top;
        text-align: right;
        padding-top: 3px;
        padding-right: 9px;
   
    }
    .section6 .box .date{
        background: #DA9F47;
        color: #00454b;
        padding: 0px 5px;
        font-size: 23px;
    }
    .section6 .box .line1{
     font-size: 19px;
    line-height: 1.8em;
    }
    .section6 .box .line2{
        font-size: 27px;
    }
    .section7{
        background: #f3f3f3;
        padding: 70px 0px;
    }
    .section7 .title{
        font-size: 32px;
        text-align: center;
        color: #056F6B;
        text-align: right;
        font-weight: bold;
    }
    #content{
        margin-bottom: 0px !important;
    }
    .holder{
        max-width: 1111px !important;
    }
    .holder3{
        max-width: 1250px !important;
        margin: 0 auto;
    }
    .clip{
/*       object-fit: cover;*/
        width: 100%;
    margin: 0 auto;
    display: block;
    }
      .clip2{
/*       object-fit: cover;*/
       width: 100%;
    margin: 0 auto;
    display: block;
    }
    .vid{
        
    }
    .vid:before {
        content: '';
        position: absolute;
        background: rgb(197 115 0);
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0.85;
        mix-blend-mode: multiply;
    }
    .vid2:before {
        content: '';
        position: absolute;
        background: rgb(169 195 56);
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
         opacity: 0.85;
        mix-blend-mode: multiply;
    }
    .child1-holder{
        position: absolute;
        top: 0;
        width: 100%;
    }
     .child2-holder{
        position: absolute;
        top: 0;
         width: 100%;
    }
     .child1-holder .c1{
            text-align: right;
            padding: 10% 15%;
    }
     .child2-holder .c2{
            text-align: right;
            padding: 10% 15%;
    }
   @media (max-width:1350px){
       
       .child2-holder .c2 {
            padding: 3% 15%;
        }
       .child1-holder .c1 {
            padding: 3% 15%;
        }     
       .child1 .txt1, .child2 .txt1 {
            font-size: 39px;
        }
       .child1 .txt3, .child2 .txt3 {
            font-size: 20px;
        }
       .child1 .txt4 a, .child2 .txt4 a {
           padding: 12px 33px;}
       .child1 .txt2, .child2 .txt2 {
            margin: 24px 0px;
        }
       .section2 .sec2-desc {
            font-size: 30px;
        }
       .section2 a {
        padding: 10px 56px;
        font-size: 20px !important;
       }
       .section3 .title {
           font-size: 34px;
       }
       .section3 .title2 {
           font-size: 34px;
       }
       .section3 .col2 .sub-titles {
           font-size: 20px;
       }
       .section4 .title {
           font-size: 34px;
       }
       .mySlides .description {
           font-size: 23px;
       }
       .section4 .student {
           font-size: 20px;
       }
       .section5 .boxes2 {
           font-size: 25px;
       }
       .section5 .boxes {
           font-size: 25px;
       }
       
       
       
       
       
    }
    
    
    
    @media (max-width:1100px){
        .desc0 {
        font-weight: 400;
        font-size: 22px;
        padding: 50px 18px;
        text-align: right;
        width: 100%;
        }
        .child2-holder .c2 {
            text-align: right;
            padding: 2% 13%;
        }
        .child1-holder .c1{
        text-align: right;
         padding: 2% 13%;
        }
        .child1 .txt1, .child2 .txt1 {
            font-size: 30px;
            color: #F3F3F3;
        }
        .child1 .txt3, .child2 .txt3 {
            color: #fff;
            font-size: 16px;
        }
        .child1 .txt4 a, .child2 .txt4 a {
            padding: 8px 25px;
            color: #056F6B;
            font-size: 15px;
            background: #F3F3F3;
            border-radius: 8px;
        }
        .child1 .txt2, .child2 .txt2 {
            margin: 20px 0px;
        }
        .section2{
            padding: 75px 15px;
        }
        .section2 .sec2-desc {
            font-weight: bold;
            margin-bottom: 20px;
            color: #00454B;
            font-size: 30px;
            font-weight: 700;
        }
        .section2 a {
            background: #C2514C;
            color: #fff !important;
            padding: 8px 41px;
            font-size: 20px !important;
            border-radius: 8px;
            margin-top: 15px;
        }
        .section3{
            margin: 0 15px;
        }
        .section3 .title {
            font-size: 30px;}
        .section3 .title2 {
            font-size: 30px;
        }
        section3 .col2 .sub-titles {
            font-size: 17px;
            color: #646464;
            margin-right: 5px;
            margin-bottom: 25px;
            padding-right: 29px;
            position: relative;
        }
        .section3 .col2 .sub-titles .icon {
            position: absolute;
            right: -2px;
            top: 0px;
        }
        .section4 {
            padding: 60px 110px;
        }
        .section4 .title {
            font-size: 30px;
        }
       .mySlides .description {
            display: inline-block;
            padding: 0px;
            color: #646464;
            font-size: 23px;
        }
        .section4 .student {
            color: #056F6B;
            font-size: 15px;
            text-align: right;
            margin-top: 15px;
        }
        .section6 {
            padding: 95px 14px;
        }
        .section7 {
            background: #f3f3f3;
            padding: 70px 100px;
        }


        
        
        
    }
/*    slider mobile*/

    .mobile{
        display: none;
    }
    @media (max-width:1111px){
        .layer2{
            display: none;
        }
        .mobile{
            display: block;
        }
    }
    
      @media (max-width:1000px){
          .desc0 {
            font-size: 20px;
        }
          .child1 .txt1, .child2 .txt1 {
            font-size: 24px;
        }
          .child1 .txt2, .child2 .txt2 {
                margin: 16px 0px;
            }
          .child1 .txt2 img, .child2 .txt2 img {
               max-width: 55px ;
            }
          .child1 .txt4, .child2 .txt4 {
                margin-top: 35px;
            }
        }   
    
    @media (max-width:840px){
       .Parent {
           display: block;}
        .child1, .child2 {
            position: relative;
            width: 100%;
        }
        .child1-holder .c1, .child2-holder .c2 {
            padding: 14% 14%;
        }
        .child1 .txt1, .child2 .txt1 {
            font-size: 40px;
        }
        .child1 .txt2, .child2 .txt2 {
            margin: 25px 0px;
        }
        .child1 .txt2 img, .child2 .txt2 img {
            max-width: 75px;
        }
        .child1 .txt3, .child2 .txt3 {
            font-size: 19px;
        }
        .child1 .txt4, .child2 .txt4 {
            margin-top: 50px;
        }
        
    }   
    
     @media (max-width:800px){
         .section7 {
            padding: 70px 14px;
        }
    }
    @media (max-width:455px){
        .imgpost3 {
        width: 74%;
        }
    }
      @media (max-width:740px){
       .Parent {
           display: block;}
        .child1, .child2 {
            position: relative;
            width: 100%;
        }
        .child1-holder .c1, .child2-holder .c2 {
            padding: 10% 14%;
        }
        .child1 .txt1, .child2 .txt1 {
            font-size: 35px;
        }
        .child1 .txt2, .child2 .txt2 {
            margin: 25px 0px;
        }
        .child1 .txt2 img, .child2 .txt2 img {
            max-width: 50px;
        }
        .child1 .txt3, .child2 .txt3 {
            font-size: 19px;
        }
        .child1 .txt4, .child2 .txt4 {
            margin-top: 40px;
        } 
    }   
    @media (max-width:650px){
        .section4 {
            padding: 60px 53px;
        }
        .section5 .box-holder {
            max-width: 95%;
            margin: 0 auto;
        }
        .section5 .boxes {
            width: 70%;
            padding: 25px;
            font-size: 26px;
        }
        .section5 .boxes2 {
            width: 62%;
            padding: 25px;
            font-size: 26px;
            margin-right: 25%;
        }
        .section6 .box {
        padding: 29px;
        margin: 0 auto;
        }
        
    }
        @media (max-width:570px){
            .section6 {
                padding: 65px 14px;
            }
            .section7 {
                padding: 40px 14px;
                padding-top: 50px;
            }
            .section6 .box .col2 {
            display: inline-block;
            vertical-align: top;
            text-align: right;
            padding-top: 3px;
             padding-right: 0px; 
            margin-top: 28px;
            width: 58%;
            text-align: center;
        }
            .section5 {
                padding: 41px 0px;
            }
            .section5 .boxes, .section5 .boxes2 {
            font-size: 20px;
        }

        .child1-holder .c1, .child2-holder .c2 {
            padding: 4% 14%;
        }
        .child1 .txt1, .child2 .txt1 {
            font-size: 35px;
        }
        .child1 .txt2, .child2 .txt2 {
            margin: 25px 0px;
        }
        .child1 .txt2 img, .child2 .txt2 img {
            max-width: 50px;
        }
        .child1 .txt3, .child2 .txt3 {
            font-size: 19px;
        }
        .child1 .txt4, .child2 .txt4 {
            margin-top: 40px;
        } 
    }
            @media (max-width:540px){
                .next {
                    right: -19%;
                }
                .prev {
                    left: -19%;
                }
                .mySlides .description {
                    padding: 0px;
                    font-size: 20px;
                }
                .section4 .title {
                    font-size: 27px;
                }
                a.prev, a.next{
                    background: none;
                }
        .desc0 {
            font-size: 18px;
            padding: 50px 0px;}
         .child1{
            margin-bottom: 15px;
        }

        .child1-holder .c1, .child2-holder .c2 {
            padding: 5% 14px;
        }
        .child1 .txt1, .child2 .txt1 {
            font-size: 28px;
        }
        .child1 .txt2, .child2 .txt2 {
            margin: 20px 0px;
        }
        .child1 .txt2 img, .child2 .txt2 img {
            max-width: 45px;
        }
        .child1 .txt3, .child2 .txt3 {
            font-size: 16px;
        }
        .child1 .txt4, .child2 .txt4 {
            margin-top: 30px;
        } 
    } 
    @media (max-width:460px){
        .section6 .box .col2 {
            width: 100%;
            }
        .child1{
            margin-bottom: 15px;
        }
         .child1-holder .c1, .child2-holder .c2 {
            padding: 4% 14px;
        }
        .child1 .txt1, .child2 .txt1 {
            font-size: 18px;font-weight: bold;
        }
        .child1 .txt2, .child2 .txt2 {
            margin: 13px 0px;
            margin-bottom: 5px;
        }

        .child1 .txt3, .child2 .txt3 {
            font-size: 16px;
        }
        .child1 .txt4, .child2 .txt4 {
            margin-top: 13px;
        } 
        .child1 .txt4 a, .child2 .txt4 a {
            padding: 6px 25px;
            color: #056F6B;
            font-size: 15px;
            background: #F3F3F3;
            border-radius: 8px;
        }
        
    }
    @media (max-width:350px){
        .child1{
            margin-bottom: 15px;
        }
         .child1-holder .c1, .child2-holder .c2 {
            padding: 2% 14px;
        }
        .child1 .txt1, .child2 .txt1 {
            font-size: 20px;font-weight: 500;
        }
        .child1 .txt2, .child2 .txt2 {
            margin: 12px 0px;
            margin-bottom: 0px;
        }

        .child1 .txt3, .child2 .txt3 {
            font-size: 15px;
        }
        .child1 .txt4, .child2 .txt4 {
            margin-top: 15px;
        } 
        .child1 .txt4 a, .child2 .txt4 a {
            padding: 6px 25px;
            color: #056F6B;
            font-size: 15px;
            background: #F3F3F3;
            border-radius: 8px;
        }
        
    }
    .section7 .holder{
        width: 100%;
        max-width: 1230px !important;
    }
    
    .slider{
        width: 100%;
    }
    .slider .img img{
        width: 100%
    }
    .slider .img .mobile{
        display: none;
    }
    
    @media (max-width:600px){
        
    .slider .img .mobile{
        display: block;
    }
    .slider .img .bg{
        display: none;
    }    
    }
    .home-slider {
        margin: auto;
    }
    .home-slider .slick-slide {
        text-align: center;
        color: white;
        background: #282828;
        position: relative;
    }
    .home-slider .slide-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 20px;
    }