*{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  margin: 0;

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

}



nav{

    height: max-content;

    width:100vw;

    background-color: transparent;

    display: flex;

    align-items: center;

    position: fixed;
    justify-content: space-evenly;

    z-index: 10;

    padding-left: 120px;

    transition: all 0.4s ease-in-out;

    

}

.btn-primary:hover{

    color: #E11B61;

}



/*Styling logo*/

.logo h1 {

  margin: 0;

  padding: 10px;

  color: white;

  font-size: 32px;

  width: max-content;



}

.logo h5{

  font-size: 14px;

  color: white;

   margin: 0;

  padding: 10px;

}

.logo{

  margin-top: 20px;
 

}



/*Styling Links*/

.nav-links{

    display: flex;

    list-style: none; 

    width: 88vw;

    padding: 40px 10vw;

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

    align-items: center;

    text-transform: uppercase;


/*    margin-top: 20px;*/

}

.nav-links li a{

    text-decoration: none;

/*    margin: 0 0.7vw;*/

    color: white;
     margin-left: 30px;

}

.nav-links li a:hover {

    color: #61DAFB;

}







/*Styling Hamburger Icon*/

.hamburger div{

    width: 30px;

    height:3px;

    background: #f2f5f7;

    margin: 5px;

    transition: all 0.3s ease;

}

.hamburger{

    display: none;

}



/*Stying for small screens*/

@media screen and (max-width: 1190px){
    nav{

    height: max-content;

    width:100vw;

    background-color: transparent;

    display: flex;

    align-items: center;

    position: fixed;
    justify-content: space-between;

    z-index: 10;

    padding-left: 15px;

    transition: all 0.4s ease-in-out;
        position: fixed;

        z-index: 3;


    

}

.logo h1 {

  margin: 0;

/*  padding: 10px;*/

  color: white;

  font-size: 32px;

  width: max-content;



}

.logo h5{

  font-size: 14px;

  color: white;

   margin: 0;

/*  padding: 10px;*/

}

  /*  nav{

        position: fixed;

        z-index: 3;

    }*/
    /* .nav-links{
        margin-top: 100px;
     }*/
    .nav-links li a{

    text-decoration: none;

   margin: 0 0.7vw;
        margin-top: 50px;

        color: white;
        justify-content: center;

}
.nav-links li{
    margin-top: 50px;
}
    .logo h1 {

  margin: 0;

  padding: 10px;

  color: white;

  font-size: 32px;

  width: 150px;

}

    .hamburger{

        display:block;

        position: absolute;

        cursor: pointer;

        right: 5%;

        top: 50%;

        transform: translate(-5%, -50%);

        z-index: 2;

        transition: all 0.7s ease;

    }

    .nav-links{

        position: fixed;

        background: #131418;

        height: 100vh;

        width:100vw;

        flex-direction: column;

        clip-path: circle(50px at 90% -20%);

        -webkit-clip-path: circle(50px at 90% -10%);

        transition: all 1s ease-out;

        pointer-events: none;

        padding: 0;

        top:0;

        left: 0;



    }

    .nav-links.open{

        clip-path: circle(1000px at 90% -10%);

        -webkit-clip-path: circle(1000px at 90% -10%);

        pointer-events: all;

    }

    .nav-links li{

        opacity: 0;

    }

    .nav-links li:nth-child(1){

        transition: all 0.5s ease 0.2s;

    }

    .nav-links li:nth-child(2){

        transition: all 0.5s ease 0.4s;

    }

    .nav-links li:nth-child(3){

        transition: all 0.5s ease 0.6s;

    }

    .nav-links li:nth-child(4){

        transition: all 0.5s ease 0.7s;

    }

    .nav-links li:nth-child(5){

        transition: all 0.5s ease 0.8s;

    }

    .nav-links li:nth-child(6){

        transition: all 0.5s ease 0.9s;

        margin: 0;

    }

    .nav-links li:nth-child(7){

        transition: all 0.5s ease 1s;

        margin: 0;

    }

    li.fade{

        opacity: 1;

    }

}

/*Animating Hamburger Icon on Click*/

.toggle .line1{

    transform: rotate(-45deg) translate(-5px,6px);

}

.toggle .line2{

    transition: all 0.7s ease;

    width:0;

}

.toggle .line3{

    transform: rotate(45deg) translate(-5px,-6px);

}



/* CUSTOMIZE THE CAROUSEL

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



/* Carousel base class */

.carousel {

  margin-bottom: 4rem;

}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {

  bottom: 3rem;

  z-index: 10;

}

.btn-primary{

  background-color:#E11B61;

  border: 1px solid #E11B61;

  transition: all 0.3s linear;

}

.btn-primary:hover{

  background-color: transparent;

  border: 2px solid #E11B61;



}

.elementor-icon{

     fill: #E11B61;

    color:  #E11B61;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: transparent;

    margin-bottom: 10px;

    width:80px;

    border-radius: 20px;

    border: 3px solid #E11B61;





   

  }



.elementor-icon i{

   font-size: 40px;

     padding: 10px;

}

   

.col-lg-4{

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  margin-top: 15px;

}

.marketing .legacy{

  display: flex;

  align-items: center;

  justify-content: center;

}

.marketing .legacy .btn-secondary{

   background-color:#453e79;

  border: 1px solid #CC9955;

}

.marketing p{

  margin-top: 20px;

}

.elementor-element{

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  margin-top: 30px;

  flex-direction: column;

  flex-wrap: wrap;

}

.elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated {

    padding: 10px;

}



/* Declare heights because of positioning of img element */

.carousel-item {

  height: 32rem;

  background-color: #777;

}

.carousel-item > img {

  position: absolute;

  top: 0;

  left: 0;

  min-width: 100%;

  height: 32rem;

}

.marketing .title{

  text-align: center;

}



@media (max-width:800px){

  .admin-photos {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 30px;

    padding: 0 60px;

}



.firts {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 30px;

    flex-direction:row;

}



.col-md-6 {

    flex: 1 1 300px;

    max-width: 100%;

    text-align: center;

}



.col-md-12 {

    flex-#CC9955#CC9955sis: 100%;

    max-width: 100%;

    text-align: center;

}



img {

    max-width: 100%;

    height: auto;

}

}



/*

*/





@media (max-width: 480px) {

  .nav {

    padding: 1rem;

  }

  .nav > .nav-btn {

    display: inline-block;

    position: absolute;

    right: 0;

    top: 0;

    padding-top: 0.2rem;

  }

  .nav > .nav-btn > label {

    display: inline-block;

    width: 50px;

    height: 50px;

    padding: 13px;

  }

  .nav > .nav-btn > label > span {

    display: block;

    width: 25px;

    height: 10px;

    border-top: 2px solid #eee;

  }

  .nav > .nav-list {

    position: absolute;

    display: flex;

    flex-direction: column;

    gap: 1rem;

    width: 100%;

    background-color: #1A237E;

    height: 0;

    transition: all 0.3s ease-in;

    top: 40px;

    left: 0;

    overflow: hidden;

  }

  .nav > .nav-list > li {

    width: 100%;

    margin-top: 1.5rem;

  }

  .nav > #nav-check:checked ~ .nav-list {

    height: calc(100vh - 50px);

  }

}


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

.carousel-item {

  height: 20rem;

  background-color: #777;

}

.carousel-item > img {

  position: absolute;

  top: 0;

  left: 0;

  min-width: 100%;

  height: 20rem;

}

.marketing .title{

  text-align: center;

}


.logo h1 {

  margin: -12px;

  padding: 10px;

  color: white;

  font-size: 16px;

  width: max-content;



}

.logo h5{

  font-size: 13px;

  color: white;

   margin: -12px;

  padding: 10px;
  margin-bottom: 10px;

}
.carousel-caption {

  bottom: -2rem;

  z-index: 10;
  margin-bottom: 10px;

}

}