@charset "utf-8";



/*=========== POWERED BY MERIDIAN SOLUTIONS INC ============*/

/*font-family: 'Saira', sans-serif;*/



/*************** DEFAULT CSS ***************/

:root {

    --body-font: 'Saira', sans-serif;

    --body-font-Size: 14px;

    --body-color: #fff;

    --primary-color: #081c31;

    --secondary-color: #bf9731;

    --tertiary-color:#1a70b8;

    --black: #000;

    --white: #fff;

    --grey: (#ccc);

    --heading-font: 'Saira', sans-serif;   

    overflow-x: hidden !important;

}

body{

    background-color: #081c31;

    font-family: var(--body-font);

    font-size:var(--body-font-Size);

    font-style: normal;

    line-height: normal;

    font-weight:500;

    color: var(--body-color);

    text-decoration: none;

    margin:0px;

    -webkit-font-smoothing: antialiased;

    padding:0;

    

}



html{ scroll-behavior: smooth;}

* {

    -webkit-box-sizing: border-box;

    -mox-box-sizing: border-box;

    box-sizing: border-box;

}

::selection {

    background: var(--primary-color); /* Safari */

    color:#fff;

        }

::-moz-selection {

    background: var(--primary-color); /* Firefox */

    color:#fff;

}




h5.route-txt {
    font-size: 20px;
    text-align: center;
    font-weight: 500;
}

.marquee a {
    font-size: 26px;
    text-transform: uppercase;
    border-radius: 5px;
    background-color: #bf9731;
    padding: 6px 10px;
    margin-right: 1%;
    display: inline-block;
}
.marquee a {
    font-size: 30px;
    text-transform: uppercase;
    border-radius: 5px;
    background-color: #bf9731;
    padding: 10px;
    margin-right: 1%;
    display: inline-block;
}
.sctn {
    overflow: hidden;
    padding:3% 0 0 0;
  }
  


  .route-box {
    background: #162c42;
    border-radius: 25px;
    overflow: hidden;
}
.route-box {
    background: #162c42;
    border-radius: 11px;
    overflow: hidden;
    margin-bottom: 25px;
    max-width: 960%;

}

    .marquee {
      animation: marquee 30s linear infinite;
      display: inline-block;
      white-space: nowrap;
  
      &:hover {
        animation-play-state: paused;
      }
    }
  
  
  .text-styling {
    padding: 2% 0;
    margin:0;
  }
  .text-styling span {
      font-size: 30px;
      font-weight: bold;
      text-transform:uppercase;
  }
  
  .scnd {
      margin-left:4%;
  }

  @keyframes marquee {
    0% {
      margin-left: 100%;
      transform: translateX(0%);
    }
    100% {
      margin-left: 0;
      transform: translateX(-100%);
    }
  }


a {

    color:var(--body-color);

    text-decoration: none;

    -webkit-transition: all 300ms ease-in-out;

    -moz-transition: all 300ms ease-in-out;

    transition: all 300ms ease-in-out;

    }

    a:hover {

    color: var(--tertiary-color);

    }



p {

    margin:0px 0 30px 0;

    clear:left;

    padding:0;

    line-height: 23px

    }

h1, h2, h3, h4, h5, h6 {

    margin:0 0 20px 0;

    padding:0;

    font-weight:700;

    }



  

hr {

    margin:30px  0 30px 0;

    height:1px;

    border:0;

    border-top:1px solid #fff;

    

    float:left;

    width:100%;

    position:relative;

}



img{

    border:0;

     -webkit-transition: all 300ms ease-in-out;

    -moz-transition: all 300ms ease-in-out;

    transition: all 300ms ease-in-out;

    

}   

a img {

    border: 0;

    }



/*-----------text styles------------*/

.text-white{

    color:var(--white)!important;

}

.text-black{

    color: #000  !important;

}

.text-blue{

    color: var(--primary-color) !important;

} 

.text-bblue{

    color: var(--tertiary-color) !important;

}

.text-yellow{

    color: var(--secondary-color) !important;

} 

.text-center{ text-align: center; }

.text-right{ text-align: right; }

.text-justify{ text-align: justify; }

.uppercase{text-transform: uppercase;}

/*-----------background styles------------*/

.bg-blue{background-color: var(--primary-color)}

.bg-yellow{background-color: var(--secondary-color)}

/*************** PRELOADER ***************/

#preloader {

    position: fixed;

    top:0;

    left:0;

    right:0;

    bottom:0;

    background-color:#081c31; /* change if the mask should have another color then white */

    z-index:999999; /* makes sure it stays on top */

}

#status {

    width:100%;

    height:100%;

    position:absolute;

    left:0; /* centers the loading animation horizontally one the screen */

    top:0; /* centers the loading animation vertically one the screen */

    background-image:url(../images/loading.png); /* path to your loading animation */

    background-repeat:no-repeat;

    background-position:center;

    margin:0; /* is width and height divided by two */

}

/*#status{

 -webkit-animation: flipInY 1s infinite alternate;

  -moz-animation: flipInY 1s infinite alternate;

  -ms-animation: flipInY 1s infinite alternate;

  -o-animation: flipInY 1s infinite alternate;

  animation: flipInY 1s infinite alternate;

    }*/

/*************** BACK TO TOP ***************/



/*************** COLUMS AND ROWS ***************/

main{

    position:relative;

    }

.row{

    width:100%;

    display:block;

    float:left;

    padding:0;

}

.row-flex{ 

    width: 100%;

    float: left;

    margin: 0;

    padding: 0;

    display: block;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap; 

}

.justify-center{justify-content: center;}

.align-center{align-items: center;}

.space-between{justify-content: space-between;}

.justify-end {

    justify-content: flex-end;

}

.container{

    width:1270px;

    margin:0 auto;

}

.fullwidth{

    width:100%;

    display:block;

}

.two-col{

    width: 46%;

    float: left;

    margin-right: 8%;

}

.three-col{

    width:30%;

    float:left;

    margin-right:5%;

}

.four-col{

    width:22%;

    float:left;

    margin-right:4%;

}

.last{

    margin-right:0 !important;

}

.clearfix{

    width:100%;

    height:100px;

    float:left;

    margin:0;

    padding:0;

    display:block;

}



section , footer {

    width: 100%;

    float: left;

    position: relative;

}

.aside {

    width: 25%;

    float: left;

    margin: 0;

    padding: 0;

}

.summary {

    width: 74%;

    float: right;

    margin: 0;

    padding: 0 0 0 100px;

}

.col, .fl-left{

    float:left

}

.fl-right{float: right;}

.smd1{

    width:100%

}

.smd2{

    width:50%

}

.smd3{

    width:33.33333333333333%

}

.smd4{

    width:25%

}

.smd5{

    width:20%

}

.smd6{

    width:16.66666666666667%

}

.smd40{

    width:40%

}

.smd60{

    width:60%

}

.smd30{

    width:30%

}

.smd70{

    width:70%

}

.smd75{

    width:75%

}

.smd66{width: 66.66666666%;}





.pd-5{ padding:5px; }

.pd-10{ padding:10px; }



/*************** HOME PAGE CSS ***************/

header{  

width: 100%; 

top:-100px;

 -webkit-transition: all 300ms ease-in-out;

-moz-transition: all 300ms ease-in-out;

transition: all 300ms ease-in-out;

 }

.header{

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.logo{ 

    display: flex;

    align-items: center;

    gap:5px;

    padding: 15px 0;

 }

 .logo a{ 

    display: inline-block;

 }

 .logo-img{

    max-width: 240px;

 }

.hilite-logo{

    max-width: 51px;

    background: #fff;

    padding: 3px;

    display: none;

}

.logo img{}

.header-right{

    display: flex;

    align-items: center;

    gap:25px;

}

.btn-style{

    border-radius: 23px;

    background: var(--secondary-color);

    color: var(--white);

    font-size: 11px;

    padding: 11px 12px;

    line-height: 15px;

     -webkit-transition: all 300ms ease-in-out;

-moz-transition: all 300ms ease-in-out;

transition: all 300ms ease-in-out;

}

.btn-style:hover{

    background-color: var(--tertiary-color)

    }

.btn-style a{

    padding: 0px 3px;

      font-size: 11px;

      text-transform: uppercase;

      color: var(--white)

}

.btn-style a:hover{

    color: var(--secondary-color);

    }

.the-whiteschool-logo{

    max-width: 261px;

}

.heading{

    font-size: 68px;

    line-height: 70px;

    font-weight: bold;

    margin-bottom: 30px;

}

.heading span{

    color: transparent;

    -webkit-text-stroke-width: 1px;

    -webkit-text-stroke-color: #fff;

}

.italic{

    font-style: italic;

}

.bold{

    font-weight: 700;

}

.social {

    float: right;

    font-size: 16px;

    line-height:25px;

}

.social a i{

    margin-right: 7px;

    font-size: 19px;

    color: #2e4187;

    }

    .social a:hover i{

    color: #2e4187;

    }







.menu-wrap{

      

}





.sch-btn {

float: right;

    background-color: #fff;

    border: 1px solid #bfbfbf;

    width: 60px;

    height: 60px;

    color: #000;

    font-size: 20px;

    font-weight: 700;

    padding: 18px;

    position: relative;

    z-index: 100;

}

.slider-wrap {

    float: left;

    width: 100%;

    position: relative;

}

.slider-wrap:after{ position: absolute; content: ''; width: 100%; height: 160px; left: 0px; bottom: 0px; 

background: rgb(255,255,255);

background: linear-gradient(180deg, rgba(255,255,255,0) 58%, rgba(8,28,49,1) 100%);

 opacity:1; }


.slider-wrap ol.carousel-indicators {
    display: none;
}
.slider-wrap .carousel-control {
    display: block;
}



.link{}
.link a{

font-weight: 400;

text-transform: uppercase;

background: #fff;

color: #fff;

padding: 15px 52px 15px 27px;

margin: 0;

position: relative;

font-size: 12px;

display: inline-block;

margin: 0 0 10px 0;

background-color: var(--secondary-color);

border-radius: 25px;

overflow: hidden;

}

.link a span {

    position: relative;

    z-index: 2;

}

.link a:hover span {

    color: #fff;

}

.link a:after{

    content: '';

    width: 0;

    height: 100%;

    position: absolute;

    bottom: 0;

    left: 100%;

    z-index: 1;

  border-radius: 25px;

    background: var(--tertiary-color);

    -webkit-transition: all 0.3s ease;

    transition: all 0.3s ease;

}

.link a:before{

content: '';

    width: 44px;

    height: 100%;

    position: absolute;

    bottom: 0;

    right: 8px;

    z-index: 2;

    background-image: url(../images/icons/arrow.png);

    background-repeat: no-repeat;

    background-position: center center;



    color: #fff;

    -webkit-transition: all 0.3s ease;

    transition: all 0.3s ease;

}



.link a:hover:after {

    width: 100%;

    left: 0;

    -webkit-transition: width 0.3s ease;

    transition: width 0.3s ease;

}



.category-single{

    border-top-left-radius: 25px;

    border-top-right-radius: 25px;

    overflow: hidden;

    position: relative;

}

.title-div{

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: absolute;

    z-index: 1;

    bottom: 0;

    left:0;

    padding: 10px 80px 10px 30px;

    color: var(--white);

    background: rgb(0,0,0);

background: linear-gradient(180deg, rgba(0,0,250,0) 0%, rgba(0,0,0,0.7) 100%);

}

h3{

    font-size: 24px;

    font-weight: 500;

}

.title-div .arrow{

    position: absolute;

 top:7px;

    right:20px;

    }

.category-single:hover .arrow{

transform: rotate(360deg);

background-color: var(--tertiary-color);

    }

.arrow{

    width: 43px;

    height: 43px;

    background:url(../images/icons/arrow.png) no-repeat center center;

    background-color: var(--secondary-color);

    border-radius: 100%;

     -webkit-transition: all 300ms ease-in-out;

    -moz-transition: all 300ms ease-in-out;

    transition: all 300ms ease-in-out;

}

/*--------------------countdowntimer------------*/

#demo {

  display: flex;

  /* justify-content: space-between; */

}



 ul#demo {

  list-style-type: none;

}

ul#demo li {

  /*  border: 1px solid #353b48;

  border-radius: 100%;*/

  height: 100px;

  width: 25%;

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 0 1em;

  font-style: italic;

  text-align: center;

  flex-direction: column;

  position: relative;

  }

ul#demo li:after{

    content: '';

    position: absolute;

    top:0;

    right: -16px;

    width: 1px;

    height: 120px;

    background-color: var(--secondary-color);

    transform: rotate(20deg);

}

ul#demo li:last-child:after{

display: none;

    }

ul#demo li h2{

    font-size: 68px;

    line-height: 70px;

    font-weight: 600;

    margin-bottom: 0px;

    font-style: italic;

    }

ul#demo li span{

    font-size: 20px;

    line-height: 25px;

    color: var(--secondary-color);

    text-transform: capitalize;

}



.section-intro{

    /* overflow-x: hidden; */

}

.white-box{

    background: url(../images/man-bg.png) no-repeat bottom right var(--white);

    border-bottom-right-radius: 100px;

    /* position: relative; */

    min-height: 540px;

    color: var(--primary-color);

    display: flex;

    justify-content: flex-end;

}

.section-intro:after{

content: '';

    width: 50%;

    height: 100%;

    background: var(--white);

    position: absolute;

    top: 0;

    left: 0;

    min-height: 500px;

    z-index: 0;

    }

.counter-box{width: 50%;/* height: 100%; */min-height: 530px;

    position: absolute;top: 0;left: 0;background: url(../images/counterbg.jpg) no-repeat top right;

    color: var(--white);z-index: 1;border-top: 10px solid #fff;border-bottom-right-radius: 100px;

    display: flex; justify-content: flex-end;

    overflow: hidden;

}



.introbox{

    padding: 20px 50px 50px 50px;

    width: 68%;



}

.introbox-head{

padding-right: 0;

padding-bottom: 0

}

.small-heading{

    font-size: 44px;

    line-height: 46px;

    margin-bottom: 25px;

}

/*-------------------------*/



.counter-wrap{

padding-right: 45px;

background: rgb(255,255,255);

background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.7) 100%);

}

.data-progress {

    padding: 0px;

    margin-left: 0px;

    padding-top: 30px;

}



.data-progress li {

    list-style: none;

    display:block;

    vertical-align: middle;

    position: relative;

    padding-left: 0px;

    text-align: right;

    padding: 11px 0;

}



.data-progress li h2 {

  /*    font-weight: 700;

  color: transparent;

    font-size: 52px;

    margin-bottom: 0;

    line-height: 52px;*/

  font-style: italic;

  font-weight: 600;

  }



.data-progress li h2 span {

  /*  font-size: 58px;

    color: #000;*/

}



.data-progress p {font-size: 20px;font-style: italic;font-weight: 600;margin-bottom: 0px;color: var(--secondary-color);}



h2{

        font-size: 68px;

    line-height: 70px;

    font-weight: bold;

    margin-bottom: 0px;

}

.subheading{

    font-size: 20px;

    font-style: italic;

    line-height: 24px;

    color: var(--secondary-color);

    

}

.title-one{font-size: 20px;

   

    line-height: 24px;

    color: var(--secondary-color);}

.underline-style{

padding-bottom: 15px;

margin-bottom: 15px;

border-bottom: 2px solid #ccc;

display: block;

}

.highlight-text{

    font-size: 14px;

}



.section-why{

    background: url(../images/bg1.jpg) no-repeat center center;

   /*background-attachment: fixed;*/

   /*background-size: 100%*/

}

.why-coloumn{

    width: 32%;

    padding: 50px 0

}

.why-points{

    padding: 25px 0;

}

.why-points p{

    font-size: 14px;

    line-height: 18px;

}

.why-points h3{

    font-size: 32px;

    line-height: 35px;

    font-weight: 700;

    margin-bottom: 25px;

    padding-bottom: 25px;

    border-bottom: 1px solid var(--secondary-color);

    font-style: italic;

    }

.why-points h3 span{

    color:var(--secondary-color);

}

.mobile-img{

    max-width: 100%;

    display: none;

}



/*----------------*/

.single-column {



    width: 33%;

    border-right: 1px solid rgba(255, 255, 255, 0.3);

    position: relative;

}

.single-column-box {

 

    width: 100%;

  

    border-bottom: 1px solid rgba(255, 255, 255, 0.3);

    position: relative;

    padding: 35px 15px 25px 135px;

    height: 195px;

    overflow: hidden;

    -webkit-transition: all 300ms ease-in-out;

    -moz-transition: all 300ms ease-in-out;

    transition: all 300ms ease-in-out;

}

.single-column-box:hover{

    background: rgba(8, 24, 49, 0.2);

    }

.single-column-box img{

    position: absolute;

    top:20px;

    left:0;

    }

.single-column-box h3{

    font-size: 22px;

    line-height: 25px;

    margin-bottom: 10px;



}

.single-column-box p{

        margin-bottom: 0px;

    }

.single-column:last-child {

    border-right: none;

}

.single-column-box:last-child {

    border-bottom: none;

}



.section-register{

    overflow-x: hidden;

}

.regsiter-wrap{

    background: url(../images/registerbg.jpg) no-repeat top right;

   /* padding-right: 30%;*/ 

    padding-right: 40%;



}

.proceed-wrap{

         background: none; 

        width: 100% !important;

         padding: 0; 

      

}

.register-head{

    color: var(--primary-color);

    border-bottom: 1px solid var(--primary-color)

}

.get-otp-wrap{

        /* background: none; */

        width: 90% !important;

        /* padding: 0; */

        margin: 0 auto;

}

.get-otp-wrap .registerbox{

    min-height: 350px;

}

.curved{

    border-top-right-radius: 100px;

}

.registerbox{

    background:var(--secondary-color);

    padding: 50px 50px 50px 0px;

    position: relative;

    float: left;

    width: 100%;

}

.registerbox:after{

    content: '';

    width: 1000%;

    height: 100%;

    position: absolute;

    top:0;

    left:-1000%;

   background:var(--secondary-color);

    }



.form-box-in {

  width:100%;

}

.form-box-in form{

    width: 100%;

    display: flex;

    flex-wrap: wrap;

}

.add-rmve-select-box {
    display: flex;
    gap: 15px;
    align-items: center;
}
.add-rmve-select-box select.fieldset option {
    background-color: #000;
}
.add-rmve-select-box button.remove-participant.btn-style {
    padding: 0;
    border: 0;
    background: #ff00009c;
    width: 35px;
    height: 35px;
    border-radius: 5px;
    font-size: 13px;
}


.registration-form .fieldset {

    width: 100%;

    height: auto;

    padding: 15px 10px 15px 40px;

    background-color: none;

    background-color: transparent;

    display: block;

    border: 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.9);

    margin: 0 0 0px 0;

    color: #fff;

    font-size: 14px;

    border-radius: 0;

}

a.underline-link{

text-decoration: underline;

}

a.underline-link:hover{

text-decoration: underline;color: #000;

}





/*********file chosen style**************/



input.file{

    display: none;

}

.custom-file-upload {

    border: 0;

    display: block;

    padding: 16px 20px;

    color: #333;

    cursor: pointer;

    background-color: #f1f1f1;

    border-radius: 6px;

    border: 1px solid #ccc;



}

.registration-form .fieldset2 {

    padding-left: 10px;

    }

.checkbox-row{

    display: flex;

    align-items: center;

    gap:30px;

}

.checkbox-row>div{

    display: flex;

    align-items: center;

    gap:10px;

    margin-bottom: 30px;

}

.checkbox{

    width: 30px;

    height: 30px;

    border:0;

    border:1px solid #000;

}

.registration-form span {

    position: relative;

     float: left; 

    width: 100%;

    margin-bottom: 0px;

    display: inline-block;

}

.registration-form span i {

    position: absolute;

    left: 0;

    top: 0;

    color: var(--white);

    font-size: 15px;

    width: 36px;

    height: 100%;

    line-height: 50px;

}

.registration-form span label {

    font-size: 14px;

    font-weight: 500;

    color: #fff;

    position: absolute;

    top: 16px;

    left: 40px;

    display: inline-block;

    z-index: 2;

}



select.classic {

    background-image: url(../images/icons/down-arrow.png);

    background-repeat: no-repeat;

    background-position: right center;

    background-color: #fff;

    padding: 0 50px 0 23px;



}

.classic {padding: 0 50px 0 23px;}

select.classic:focus {

    border:0;   

    background-image: url(../images/icons/up-arrow.png);

    background-repeat: no-repeat;

    background-position: right center;

    border:1px solid #D9D9D9;

}



.form-group {

    position: relative;



}

.form-group-select select {

    -webkit-appearance: none;

    -moz-appearance: none;

    -ms-appearance: none;

    -o-appearance: none;

    appearance: none;

    color: #fff !important;

    cursor: pointer;

    background: transparent;

    background:url(../images/icons/down-arrow.png) no-repeat 98% 61%;

  

    padding: 18px 10px 16px 2px  !important;

    height: 80px;

}

.rice-dtls {
    font-size: 20px;
}
.rice-dtls span.highlight-text {
    font-size: 17px;
}

.form-group-select option{

    background-color: #000 !important;

}


form.registration-form.col select option {
    background-color: #000 !important; color: #fff !important;
}
form.registration-form.col select option:disabled { background-color: #202020 !important; }

.participant-row{ margin-bottom: 15px;}
.participant-row .participant-title{ margin-bottom: 10px; font-size: 18px; color: var(--primary-color);}

.form-group-select select:focus {

    border:0;

    border-bottom: 1px solid #fff;

    background: url(../images/icons/up-arrow.png) no-repeat 97% 61%;

    }

.form-group-select:after {

    content: "";

    position: absolute;

    top: 0%;

    right: 0;

    width: 50px;

    height: 100%;

    /* transform: translateY(-50%); */

    font-size: 12px;

    border-left: 1px solid #ccc;

    z-index: -1;

}

.schedulebox{

padding: 10px 15px 5px 0px;

    width: 100%;

    float: left;

}

.schedulebox h3, .news-desc h3{

    font-size: 18px;

    line-height: 22px;

    font-style: italic;

    margin-bottom: 14px;

}

.date{

    display: inline-block;

    margin-bottom: 7px;

    font-size: 12px;

    font-style: italic;

    color: var(--secondary-color);

}



.news-single{

    background: #162c42;

    border-radius: 25px;

    overflow: hidden;

}

.news-single a{

    color: var(--white)

    }

.news-desc{

    padding: 40px 40px;

}

.readmore a{

    display: inline-block;

    padding: 5px 36px 5px 5px;

    background: url(../images/icons/arrow.png) no-repeat right;

    text-transform: uppercase;

    color: var(--secondary-color);

    font-weight: 500;

    font-size: 11px;

    line-height: 14px;

}

.readmore a:hover{

    padding-right: 40px;

    color: var(--white);

    }



.gallery-item{

    border-radius: 25px;

    overflow: hidden;

}



.left-image-box  .overlay-effect2  {

    width: 40%;

    position: absolute;

    top: 70px;

    left: 0;

    border-bottom-right-radius: 100px

}

.contentbox{

    min-height: 500px;

}



.category-box{



}

.category-box p{

   margin-bottom: 15px; 

}

/*************** paddings ***************/

.pt-100{padding-top: 100px}

.pb-100{padding-bottom: 100px}

.pt-50{padding-top: 50px}

.pb-50{padding-bottom: 50px}

.pt-70{padding-top: 70px}

.pb-70{padding-bottom: 70px}

.pt-30{padding-top: 30px}

.pb-30{padding-bottom: 30px}

.pt-20{padding-top: 20px}

.pb-20{padding-bottom: 20px}

.pt-0{padding-top: 0px}

.pb-0{padding-bottom: 0px !important}



.pad-0{padding: 0}

.pad-25{padding: 25px}

.pl-100{padding-left: 100px}

.pr-100{padding-right: 100px}

.pl-80{padding-left: 80px}

.pr-80{padding-right: 80px}

.pl-20{padding-left: 20px}

.pr-20{padding-right: 20px}

.pl-30{padding-left: 30px}

.pr-30{padding-right: 30px}

.pl-50{padding-left: 50px}

.pr-50{padding-right:50px}

.pl-70{padding-left: 70px}

.pr-70{padding-right: 70px}

.pr-20{padding-right: 20px}



.pl-0{padding-left: 0px !important}

.mt-100{margin-top: 100px}

.mb-100{margin-bottom: 100px}

.mt-50{margin-top: 50px}

.mb-50{margin-bottom: 50px}

.mb-10{margin-bottom: 10px}

.mt-0{margin-top: 0px}

.mb-0{margin-bottom: 0px !important}




.fs-18 {
    font-size: 17px;
    line-height: 25px;
}
































.justify-content-center{

    justify-content: center;

}

.registerbox1 {

    background: var(--secondary-color);

    padding: 0px 0px 40px 0px;

    position: relative;

    float: left;

    width: 100%;

    border-radius: 50px;

    overflow: hidden;

    box-shadow: 0px 1px 25px 0px rgb(0 0 0 / 41%);

}



.registerbox1 h6{

    padding: 20px;

    background-color: #1270b8 !important;

    font-size: 24px;

}

.registerbox1 h3.modal-title {

    margin-bottom: 0;

}

.registerbox1 .card {

    width: 100%;

}

.registerbox1 .modal-header {

    text-align: center;

}

.registerbox1 h3.modal-title {

    color: #fff;

}

.registerbox1 .modal-body .form-group{padding-left:130px; padding-bottom:15px;}





.registerbox1 .stylish-button{

    background-color: #081c31;

    color: white;

    border-radius: 0;

    border: none;

    padding: 14px 35px;

    font-size: 18px;

    font-family: 'Arial', sans-serif;

    border-radius: 30px;

}

.registerbox1 .stylish-button:hover {

    background-color: #e40006;

}

.registerbox1 .modal-footer{

    text-align: center;

}





















.success-pay {

    padding: 30px 40px 50px 40px !important;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

}



.success-pay .payment_table {

    margin-bottom: 0;

}



.success-pay .table-style th {

    padding: 12px 20px;

    background-color: #0b3051;

    color: #fff;

    font-weight: 500;

}

.success-pay h3.text-success {

    background-color: #081c31;

    padding: 40px 0 18px 0;

    position: relative;

    top: -30px;

    border-radius: 0 0 50px 50px;

    width: 60%;

}

.success-pay .text-center{

    text-align: center !important;

}

.success-pay .success-font {

    display: flex;

    justify-content: center;

}

.success-pay .card{

    width: 100%;

}









































/*************** footer CSS ***************/

footer{background: #162c42}

footer a{color: #fff;}

footer a:hover{color: var(--tertiary-color);}

.footer{

    display: flex;

    gap: 20px;

}

.f-contact{

    position: relative;

    padding: 0 0 0 45px;

    margin-bottom: 18px;

    color: #fff;

    font-size: 18px;

}

.f-contact p{

    margin-bottom: 0;

    line-height: 25px;

    }

.f-contact a{

    font-weight: 500;

    font-size: 22px;

    line-height: 23px;

}

.f-contact i{

    position: absolute;

    top:2px;

    left:0;

    font-size: 24px;

    }

.footer-div-wrap{

    display: flex;

    justify-content: center;

    gap: 20px;

}

.footer-div{

    /* width: 30%; */

}

.footer-div h3:after{

    content: '';

    position: absolute;

    bottom: 0;

    left:0;

    width: 30px;

    height: 1px;

    background:#d7ae6c;

    }

ul.footerlinks{

    margin:0 0 20px 0;

    padding: 0;

}

ul.footerlinks li{

    list-style: none;

    padding: 6px 5px;

    line-height: 20px;

    font-size: 12px;

    font-weight: 500;

    line-height: 14px;

    text-transform: uppercase;

}

.footer a{color: #fff}

.footer a:hover{color:  rgb(255, 255, 255, 0.7);}

.footer-social{

    float: none;

}

.footer-logo{

    display: flex;

    align-items: center;

    gap:4px;

}

.footer-logo img.footer-logo{

    max-width: 180px;

   /* filter: brightness(0) invert(1);*/

}

.footer-social a{

    color: #fff!important;

}

.footer-social a i {

    margin-right: 15px;

    font-size: 22px;

    color: #fff;

}

.footer-social a:hover i {

    color: #d7ae6c;

}

.footer-bottom{

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    padding: 30px 0;

    color: #fff;

    font-size: 14px;

}

.copy{

    display: flex;

    justify-content: space-between;

}

.copy p{

    margin-bottom: 0;

    }





/*************** INNER PAGE CSS ***************/



.flex-gap{gap:2%;}
.flex-gap-2 {gap:30px 2%;}
.two-flex-col{

flex:0 0 48%; 

}

.three-flex-col{

flex:0 0 31%;

}

.four-flex-col {

flex:0 0 22%;

    }

.five-flex-col {

flex:0 0 18%;

    }

.image-box{

    padding-right:30px;

    padding-bottom:30px;

    position: relative;

    float:left;

    width: 100%;

}

.stickybar{

    position: sticky !important;

    top: 120px;

}

.image-box2{

     padding-top:30px;

     padding-left:30px;

    }

.image-box .hover-effect{

    border-radius: 15px;

        -webkit-box-shadow: 0px 0px 34px -15px rgb(0 0 0 / 70%);

    -moz-box-shadow: 0px 0px 34px -15px rgba(0,0,0,0.7);

    box-shadow: 0px 0px 34px -15px rgb(0 0 0 / 70%);



    }

.image-box:after, .image-box2:before{

    content: '';

    width: 40%;

    height: 40%;

    background:#702337;

    border-radius: 15px;

    position: absolute;

    bottom: 0;

    right:0;

    z-index: -1;

    }

.image-box2:before{

        bottom: auto;

    right:auto;

    top:0;

    left:0;

      background:#d7ae6c;

}

    .highlight-text{

        font-size: 20px;

        font-weight: 500;

        line-height: 25px;

    }

    .wrap-box{

     border-radius: 15px;

    -webkit-box-shadow: 0px 0px 34px -15px rgb(0 0 0 / 70%);

    -moz-box-shadow: 0px 0px 34px -15px rgba(0,0,0,0.7);

    box-shadow: 0px 0px 34px -15px rgb(0 0 0 / 70%);

    overflow: hidden;



    }



ul.list{

    margin:0;

    padding: 0;

    margin-bottom: 30px;

}

ul.list li{

list-style: none;

    padding: 2px 7px 2px 20px;

    line-height: normal;

    font-weight: 500;

    position: relative;

}

ul.list li:before{

     content: "\f111"; 

    position: absolute;

    top:12px;

    left:0;

     font-family: "FontAwesome";

     color: var(--primary-color);

     font-size: 8px;



    }

ul.list-01 li:before{color: #fff;}

.new-accourdian ul.list li:before{color: #e40006;}

.cnt-wrap{padding: 30px 0px;background-color: var(--secondary-color);box-shadow: 0px 3px 40px #0000002e;-webkit-box-shadow: 0px 3px 40px #0000002e;-moz-box-shadow: 0px 3px 40px #0000002e;color: #fff;border-top-right-radius: 50px;}

.icon_box {border-bottom: 1px solid rgba(255, 255, 255, 0.3);padding-bottom: 7px;margin-bottom: 23px;padding: 0 20px;}

.icon_box:hover i {background-color: #000;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;}

.icon_box i {float:left;margin:0px 20px 0px 0px;padding:8px;border-radius:100%;width:45px;height:45px;text-align:center;line-height:30px;color:#fff;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;background: var(--primary-color);}

.icon_box .descripion { display:block; overflow:hidden}

.icon_box .descripion h5 {font-size: 18px;margin: 0 0 8px 0;text-transform: uppercase;color: #fff;}

.icon_box p {margin:0;padding-bottom:15px;}

.icon_box a {color: #fff;}

.icon_box:last-child{ margin-bottom:0px; padding-bottom:0px; border-bottom:none;}

.cnt-form{ float: left;  }

.map{ float: left; width: 100%; line-height: 0; }

.responsive-table{overflow-x:auto;}

.table-style {border-collapse: collapse; width: 100%; margin: 0 0 25px; padding: 0px;}

.table-style th, .table-style td {text-align: left;padding: 4px 8px; border: 1px solid #d9d9d9;}

.table-style th { background-color: #1270b8; color: white;}


.resp-tabs-container .responsive-table .table-style td  {
    color: #000;
}
/*************** INNER BANNER ***************/

.banner{ float: left; z-index: 0;

 width: 100%; height: 300px; display: flex;  justify-content: center; align-items: center;  text-align: center;

background-image: url(../images/banner1.jpg); background-position: center; background-repeat: no-repeat; position: relative; }

.banner-caption h2{color: #fff;font-size: 42px;margin-bottom: 15px;text-shadow: 0px 3px 4px #000000d1;font-weight: 700;line-height: 42px;}

.banner-caption h4, .banner-caption h4 a, .banner-caption h4 span{color: #fff;font-size: 12px;text-transform: uppercase;letter-spacing: 1px;}

.banner-caption h4{background-color: var(--secondary-color);padding: 15px 30px;display: inline-block;color: var(--white);font-weight: 500;border-radius: 30px;}

.banner-caption{position: relative;z-index: 1;}

.banner:after{ position: absolute; content: ''; width: 100%; height: 100%; left: 0px; top: 0px; 

background: rgb(255,255,255);

background: linear-gradient(180deg, rgba(255,255,255,0) 58%, rgba(8,28,49,1) 100%);

 opacity:1; }

.banner1{ background-image: url(../images/banner1.jpg); }

.banner2{background-image: url(../images/banner2.jpg);}

.promo-logos{

    display: flex;

    width: 100%;

    margin: 0px;

    padding: 0px;

    justify-content: center;

    gap: 10px;

}

.promo-logos li{

    list-style: none;

    border: 1px solid #ffffff26;

    padding: 20px;

}

.promo-logos li img{

    max-width: 100%;

}







/*************** FIXED HEADER ***************/

header.smaller {top:0; left:0px; position: fixed; z-index: 9; -webkit-transition: all 300ms ease-in-out;

-moz-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;

-webkit-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.41);

    -moz-box-shadow:    0px 1px 5px 0px rgba(50, 50, 50, 0.41);

    box-shadow:         0px 1px 5px 0px rgba(50, 50, 50, 0.41); ;

-moz-box-shadow: 0px 4px 20px #00000059; background-color: var(--primary-color);}

header.smaller .top-header{ }







/*************** JARALLAX ***************/

.jarallax{ position:relative; background-repeat:no-repeat; background-position:center center; -moz-background-size:cover; 

-webkit-background-size:cover; -o-background-size:cover; background-size:cover;}



.bg1{background: url(../images/bg1.jpg) no-repeat top center;}

.bg2{background: url(../images/bg2.jpg) no-repeat top center;}

.bg3{background: url(../images/bg3.jpg) no-repeat top center;}

.bg-main{background: url(../images/bgmain.jpg) no-repeat top center;}

/**********forms**************/

form{

    margin:0;

    padding:0;

}

*:focus {  

    outline: none;

}

.fieldset{

        width: 100%;

        height: 52px;

        padding: 8px 10px;

        background-color: none;

        background-color: transparent;

        display: block;

        border: 1px solid rgb(211 211 211);

        margin: 0 0 10px 0;

        color: #fff;

        font-size: 14px;

        float: left;

        border-radius: 6px;

        -webkit-border-radius: 6px;

        -moz-border-radius: 6px;

        -ms-border-radius: 6px;

        border-left: 2px solid var(--secondary-color);

}

.otp-box .fieldset{

    border: 1px solid rgb(255 255 255);

     border-left: 1px solid rgb(255 255 255);

    }

.fieldset1{ height: 130px; }

.sendbutton{

    width: auto;

    height: auto;

    border: 0;

    outline: 0;

    margin: 0 5px 0 0;

    display: inline-block;

    color: var(--primary-color);

    font-size: 20px;

    cursor: pointer;

    vertical-align: top;

    padding: 12px 30px 12px;

    text-align: center;

    background-color: var(--white);

   font-style: italic;

    font-weight: 700;

     -webkit-transition: all 300ms ease-in-out; 

    -moz-transition: all 300ms ease-in-out;



    

    }



    .sendbutton:hover{

        background-color: var(--tertiary-color);

        color: var(--white)

    }

.select-box {

    appearance: none;

    -webkit-appearance: none;

    background-image: url(../images/icons/icon5.svg);

    background-repeat: no-repeat;

    background-position: right 15px center;

    background-size: 14px;

}

.contact-form{ float: left;width: 100%; }

.contact-form .fieldset {margin-bottom: 0px;}

::-webkit-input-placeholder {

   color:  #fff !important;

}

:-moz-placeholder { /* Firefox 18- */

   color:  #fff !important;

}

::-moz-placeholder {  /* Firefox 19+ */

   color:  #fff !important;

}

:-ms-input-placeholder {  

   color:  #fff !important;

}



.registration-form ::-webkit-input-placeholder {

   color:  #fff !important;

}

.registration-form :-moz-placeholder { /* Firefox 18- */

   color:  #fff !important;

}

.registration-form ::-moz-placeholder {  /* Firefox 19+ */

   color:  #fff !important;

}

.registration-form :-ms-input-placeholder {  

   color:  #fff !important;

}



.wpcf7-form-control-wrap {

    position: relative;

    float: left;

    width: 100%;

}



ul.list.race-dtls-list li {
    font-size: 18px;
}
li .rice-dtls {
    font-size: 18px;
    margin: 0;
}



.thank-you-sctn h2 {
    font-size: 35px;
    font-weight: 800;
    text-align: center;
    line-height: 45px;
    margin-bottom: 10px;
}
.thank-you-sctn p {
    text-align: center;
    font-size: 17px;
    line-height: 28px;
}
.thank-you-sctn {
    text-align: center;
    background: #162c42;
    padding: 50px 100px;
    border-radius: 15px;
}
.thank-you-sctn img {
    width: 70px;
    margin-bottom: 15px;
}


.hover-link:hover { color:var(--secondary-color) !important;}



/************************************* 1600px *************************************/

@media only screen and (max-width: 1600px) {



}



/************************************* 1400px *************************************/

@media only screen and (max-width: 1400px) {



}



/************************************* 1366px *************************************/

@media only screen and (max-width: 1366px) {



}

/************************************* 1180px *************************************/

@media only screen and (max-width: 1270px) {

.container{ width:90%;}

.section-register .smd75, .section-register .smd4{width: 100%}

}



/************************************* 1024px *************************************/

@media only screen and (max-width: 1024px) {

.container{ width:90%;}

header .container{ width:100%;}





}



/************************************* 980px *************************************/

@media only screen and (max-width: 980px) {

.header {

    flex-direction: column;

}

.logo {

    padding: 8px 0;

    width: 100%;

    justify-content: center;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    margin-bottom: 10px;

}

.section-why{

   background-size: 100%

}

.four-flex-col{

  flex:0 0 48%

}

.footer {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

    justify-content: center;

}

.footer-div-wrap {

    display: flex;

    justify-content: space-between;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    padding-top: 30px;

    width: 100% !important;

}



}



/************************************* 900px *************************************/

@media only screen and (max-width: 900px) {





.otp-page-sec {

    width: 70% !important;

}

}



/************************************* 767px *************************************/

@media only screen and (max-width: 767px) {

.pt-100, .pt-70, .pt-80,.pt-50{

    padding-top:30px;

}

.pb-100, .pb-70, .pb-80,.pb-50{

    padding-bottom:30px;

}

.pl-100, .pl-70, .pl-50{padding-left:0;}

.pr-100, .pr-70, .pr-50{padding-right:0;}

.single-column {

    width: 100%;

    border-right: none;

}

.single-column-box:first-child {

    border-right: 1px solid rgba(255, 255, 255, 0.3);

}

.single-column-box:last-child {

    border-bottom: 1px solid rgba(255, 255, 255, 0.3);

     border-left: 1px solid rgba(255, 255, 255, 0.3);

}

.copy {

    display: flex;

    justify-content: space-between;

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 10px;

    font-size: 12px;

}

#demo {

    flex-wrap: wrap;

    padding:0;

    margin:0;

}

ul#demo li span {

    font-size: 16px;

    line-height: 20px;

    }

    ul#demo li:after{display: none;}

    .left-image-box {

    position: relative;

    top: 0;

}

.left-image-box .overlay-effect2 {

    width: 100%;

}

.otp-page-sec {

    width: 80% !important;

}

}



/************************************* 640px *************************************/

@media only screen and (max-width: 640px) {

    .smd30, .smd40, .smd60, .smd70, .smd75 {width: 100%}

    .smd60, .smd70, .smd75{margin-top:20px;}

    /*------------flex-col---------*/

    .three-flex-col, .two-flex-col, .four-flex-col{

  flex:0 0 100%

}

.five-flex-colum {

   flex:0 0 48%

    }

    /*------------flex-col---------*/

.mobile-img{

    display: block;

}

.section-why{

    background: none;

}

.why-coloumn{

    width: 100%;

    padding: 0;

 

}

.btn-style {

    font-size: 10px;

    padding: 9px 7px;

    line-height: 15px;

}

.the-whiteschool-logo {

    max-width: 177px;

}

.heading {

    font-size: 40px;

    line-height: 40px;

    font-weight: bold;

    margin-bottom: 16px;

}

ul#demo li h2 {

    font-size: 40px;

    line-height: 40px;

    }

    .section-intro:after {display: none;

    }

    .counter-box {

    width: 100%;

    /* height: 100%; */

    min-height: 350px;

    position: static;

    border-top: 0px solid #fff;

    border-bottom-right-radius: 50px;

    display: flex;

    justify-content: flex-end;

    overflow: hidden;

}

h2 {

    font-size: 40px;

    line-height: 40px;

    }

    .introbox {

    padding: 20px 30px 30px 30px;

    width: 100%;

}

.white-box {

    background:  var(--white);

    }

    .small-heading {

    font-size: 34px;

    line-height: 36px;

    margin-bottom: 15px;

}

.curved {

    border-top-right-radius: 50px;

}

.regsiter-wrap {



    padding-right: 0%;

}

    ul#demo li {

    width: 20%;

}

.left-image-box .overlay-effect2 {

    position: absolute;

    top: 0;

}

.otp-page-sec {

    width: 90% !important;

}
.thank-you-sctn h2 {
    font-size: 27px;
    line-height: 35px;
    margin-bottom: 25px;
}
.thank-you-sctn {
    padding: 25px;
}
.registerbox { padding: 50px 20px 50px 0px;}
.fs-18 {font-size: 15px;}
}

/************************************* 540px *************************************/

@media only screen and (max-width: 540px) {

.success-pay h3.text-success {

    width: 90%;

    font-size: 17px;

}

}

/************************************* 480px *************************************/

@media only screen and (max-width: 480px) {

.promo-logos { gap: 2%; flex-wrap: wrap;}

.promo-logos li { padding: 10px 0px;  flex: 0 0 49%; margin-bottom: 8px;}

.otp-page-sec h6.alert {

    font-size: 19px !important;

    padding: 10px;

    line-height: 25px;

}

}



    /************************************* 360px *************************************/

@media only screen and (max-width: 360px) {

    ul#demo li {

    width: 15%;

}

}



/************************************* 320px *************************************/

@media only screen and (max-width: 320px) {

}