@import url(https://fonts.googleapis.com/css?family=Cormorant:300,400,500,600,700&subset=latin,latin-ext);

@font-face {
    font-family: 'Retro Signature';
    src: url('RetroSignatureRegular.woff2') format('woff2'),
        url('RetroSignatureRegular.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

body,h1,h2,h3,h4,h5,h6,p,a,span,label,input,li,ul,ol,div{
     font-family: 'Cormorant', serif;
     color: var(--gray);
}

body{
    margin: 0;
    padding: 0;
}

::selection {
  background: var(--darkbeige); /* WebKit/Blink Browsers */
  color: #fff;
}
::-moz-selection {
  background: var(--darkbeige);  /* Gecko Browsers */
  color: #fff;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color: rgba(182,172,150, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(182,172,150, 0.6);
  outline: none !important;
}

div:focus{
	outline: none !important;
}

.retro{
     font-family: 'Retro Signature';
     font-size: 70px;
     line-height: 70px;
     position: relative;
     display: inline-block;
     margin: 20px auto 40px;
     z-index: 2;
}

span.retro::after{
     position: relative;
     display: block;
     margin-top: -16px;
     margin-left: -5px;
     width: calc(100% + 5px);
     border-bottom: 2px solid var(--green);
     content: "";
     z-index: -1;
}

h1{
     font-size: 70px;
     line-height: 70px;
     font-weight: 400;
}

h2{
     font-size: 40px;
     line-height: 40px;
     font-weight: 500px;
}

h3{
     font-size: 30px;
     line-height: 30px;
}

p{
     font-family: 'Cormorant';
     font-style: normal;
     font-weight: 400;
     font-size: 20px;
     line-height: 24px;
}

p strong{
     font-weight: bolder;
}

u{
     text-decoration-color: var(--green);
}

p span{
     color: var(--darkbeige);
}

p span strong{
     font-weight: bolder;
}

.darkBeigeBg ul{
     padding: 0;
     margin: 0;
}

.darkBeigeBg li{
     color: #fff;
     list-style: none;
     margin-top: 24px;
}

.darkBeigeBg li:before{
     content: "";
     padding-right: 0;
}

a{
	transition: all 0.25s;
}

a:hover,
a:focus{
	text-decoration: none;
}

li{
     font-size: 20px;
     line-height: 25px;
}

.bg{
     background-size: cover !important;
     background-repeat: no-repeat !important;
     background-position: center center !important;
}

.ml{
     display: flex;
     align-items: center;
     justify-content: flex-start;
}

.clear{
    clear: both;
}

.mc{
     display: flex;
     align-items: center;
     justify-content: center;
}


/* COLOURS */

:root{
     --lightbeige: rgba(182,172,150,0.15);
     --darkbeige: #B6AC96;
     --blue: #1F4D58;
     --green: #DADB1A;
     --gray: #59585B;
}


/* PUZZLES */

.puzzle{
     position: absolute;
}

.topLeftPuzzle{
     top: 0;
     left: 100px;
     transform: rotate(180deg)
}

.topRightPuzzle{
     top: 0;
     right: 100px;
     transform: rotate(180deg);
}

.bottomLeftPuzzle{
     bottom:0;
     left: 100px;
}

.bottomRightPuzzle{
     bottom: 0;
     right: 100px;
}

.whitePuzzle path{
     fill: #fff;
}

.lightBeigePuzzle path{
     fill: var(--lightbeige) !important;
}

.darkBeigePuzzle path{
     fill: var(--darkbeige) !important;
}


/* BACKGROUNDS */

section{
     padding: 135px 0;
     position: relative;
}

.lightBeigeBg{
     background: var(--lightbeige);
}

.darkBeigeBg{
     background: var(--darkbeige);
}

/* BUTTONS */

.btn-primary{
     padding: 10px 30px;
     border: 2px solid var(--green);
     border-radius: 0;
     font-family: 'Cormorant';
     font-style: normal;
     font-weight: 500;
     font-size: 25px;
     line-height: 30px;
     background: transparent;
     color: var(--gray);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
     background: var(--blue);
     border-color: var(--blue);
}


/* IMAGES */

.topLeftRadius{
     border-radius: 250px 0 0 0
}

.topRightRadius{
     border-radius: 0 250px 0 0;
}

/* NAVBAR */

.navbar{
     height: 170px;
     background: #fff;
}

.navbar .nav-link{
     font-weight: 400;
     font-size: 20px;
     line-height: 24px;
     margin-right: 50px;
}

.navbar .nav-link:hover{
     color: var(--darkbeige);
}

.navbar .nav-item:last-child .nav-link{
     margin-right: 0;
}

/* SLIDER */

#homepage-slider{
     padding: 0;
}

.swiper-slide,
.swiper-slide .content,
.swiper-slide .image{
    /* height: 800px; */
    height: calc(100vh - 166px);
    max-height: 800px;
}

.swiper-slide .content{
     display: flex;
     align-items: center;
     justify-content: left;
}

.swiper-slide h2{
     color: var(--blue);
     font-size: 60px;
     line-height: 60px;
     margin-bottom: 20px;
}

.swiper-slide h3{
     color: rgba(89,88,91,0.7);
     font-weight: 400;
     margin-bottom: 30px;
     line-height: 1.1;
}

.swiper-slide .btn-primary:hover,
.swiper-slide .btn-primary:focus,
.swiper-slide .btn-primary:active{
     background: var(--darkbeige);
     border-color: var(--darkbeige);
}

.swiper-slide .image{
     border-radius: 300px 0 0 0;
     position: absolute;
     right: 0;
     width: 50%;
     height: 100%;
}

.sliderButtons{
     width: 80px;
     height: 80px;
     border: 2px solid var(--darkbeige);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transform: rotate(45deg);
     position: absolute;
     z-index: 21;
     bottom: 40px;
     left: calc(50% - 40px);
     transition: all 0.25s;
}

.sliderButtons svg path{
     transition: all 0.25s;
}

.button-prev{
     margin-left: -80px;
}

.button-prev:hover{
     background: var(--darkbeige);
     border-color: transparent;
}

.button-prev:hover svg path{
     fill: #fff;
}

.button-prev svg{
     transform: rotate(-45deg);
}

.button-next{
     margin-left: 80px;
     border-color: #fff;
}

.button-next:hover{
     background: rgba(255,255,255,.5);
     border-color: transparent;
}

.button-next svg{
     transform: rotate(135deg);
}

.button-next svg path{
     fill: #fff;
}

.greenBorder{
     border: 2px solid var(--green);
     transition: all 0.25s;
}

.greenBorder:hover{
     border-color: var(--blue);
}

#joigy .greenBorder:hover{
    border: 2px solid var(--green);
}

p:last-child{
    margin-bottom: 0;
}

/* FEEDBACK SLIDER */

.feedback-slider{
     width: 100%;
     overflow: hidden;
}

.feedback-slider .swiper-slide{
     height: 630px;
     transition: all 0.25s;
}


.feedback-slider .swiper-slide .container{
     padding: 50px 150px;
}

.feedback-slider img.profilePic{
     height: 100px;
     width: 100px;
     object-fit: cover;
     border-radius: 50px;
}

.feedbackContentImage{
     width: 100%;
     height: 231px;
}

.feedback-slider .contentSide{
     height: 231px;
     overflow-y: scroll;
}

.feedback-slider .sliderButtons{
     left: 110px;
     top: calc(50% - 40px);
     border: 1px solid #ababac;
}

.feedback-slider .sliderButtons:hover{
     background: #ababac;
}

.feedback-slider .button-next{
     margin-left: 0;
     right: 30px;
     left: auto;
}

.feedback-slider .sliderButtons svg path{
     fill: #ababac;
}

.feedback-slider .sliderButtons:hover svg path{
     fill: #fff;
}

.feedback-slider .company p{
     margin-bottom: 0;
}

/* CONTACT */

.form-control{
     border-radius: 0;
     background: transparent;
     border: 2px solid var(--green);
     color: var(--gray);
     font-weight: 500;
     font-size: 25px;
     line-height: 30px;
}

label.form-check-label{
     color: var(--gray);
     font-weight: 500;
     font-size: 20px;
     line-height: 30px;
}

.form-check-input{
     margin-top: 9px;
}

/* PROGRAMS */

.programs .inner{
     padding-top: 20px !important;
}

.programs .retro{
     margin: 0;
     display: block;
}

.programs .retro:after{
     display: none;
}

.programs .inner li{
     list-style: disc;
     font-size: 20px;
     line-height: 25px;
}

.programs .card-body{
    background: transparent;
    border: none;
    padding-left: 0;
}


.colleagues h3{
     font-size: 40px;
     line-height: 40px;
}

.pezzlesum h3{
     font-size: 40px;
}

footer{
     padding: 40px 0;
}

footer p, 
footer a{
     color: #fff;
     font-size: 20px;
     margin-bottom: 0;
     line-height: 25px;
}

/*  EQUAL PICTURE HEIGHT  */

.topRightRadiusBg{
    background-repeat: no-repeat !important;
    border-radius: 0 250px 0 0;
    height: calc(100% - 5px);
    display: block;
    max-width: calc(100% - 30px);
    background-size: cover !important;
    min-height: 400px;
    
}


@media (max-width: 767px){

     #wrapper{
          margin-top: 60px;
     }

     h3{
          font-size: 24px;
     }

     .retro{
          font-size: 50px;
          line-height: 50px;
     }

     p{
          font-size: 18px;
     }

     section{
          padding: 80px 0;
     }

     section img{
          margin: 20px 0;
     }

     .btn-primary{
          font-size: 20px;
     }

     /* PUZZLES */

     .puzzle svg{
          width: 40px !important;
          height: auto;
     }

     .topLeftPuzzle,
     .bottomLeftPuzzle{
          left: 30px;
     }

     .topRightPuzzle,
     .bottomRightPuzzle{
          right: 30px;
     }

     /* SLIDER */

     #homepage-slider{
          padding: 0;
     }
     
     .swiper-slide{
          height: 700px;
     }

     .swiper-slide .content{
          height: 350px;
     }
     
     .swiper-slide .image{
          height: 350px !important;
          width: 100% !important;
          bottom: 0;
          border-radius: 150px 0 0 0 !important;
     }

     .swiper-slide .content{
          display: flex;
          align-items: center;
          justify-content: left;
     }
     
     .swiper-slide h2{
          font-size: 40px;
          line-height: 40px;
          margin-bottom: 10px;
     }
     
     .swiper-slide h3{
          font-weight: 400;
          margin-bottom: 30px;
          line-height: 1.1;
     }

     .swiper-slide .image{
          border-radius: 300px 0 0 0;
          position: absolute;
          right: 0;
          width: 50%;
          height: 100%;
     }
     
     .sliderButtons{
          width: 40px;
          height: 40px;
          border: 2px solid #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transform: rotate(45deg);
          position: absolute;
          z-index: 21;
          bottom: 40px;
          left: calc(50% - 20px);
          transition: all 0.25s;
     }
     
     .button-prev{
          margin-left: -80px;
     }


     .button-prev:hover svg path{
          fill: #fff;
     }

     .button-prev svg{
          transform: rotate(-45deg);
     }

     .button-next{
          margin-left: 80px;
          border-color: #fff;
     }

     .sliderButtons:hover{
          background: rgba(255,255,255,.5);
          border-color: transparent;
     }

     .button-next svg{
          transform: rotate(135deg);
     }

     .sliderButtons svg path{
          fill: #fff;
     }


     /* PROGRAMS */

     .programs .inner{
          padding: 25px 20px 20px !important;
     }

     .programs .retro{
          line-height: 30px;
          margin-bottom: 10px;
     }

     /* PUZZLESUM */

     .pezzlesum h3,
     .pezzlesum h3 span{
          line-height: 40px;
     }

     /* colleagues */

     .colleagues .item{
          margin-bottom: 50px;
     }

     .colleagues .item:last-child{
          margin-bottom: 0;
     }

     .colleagues .mt-5{
          margin-top: 15px !important;
     }

     .colleagues .mb-5{
          margin-bottom: 15px !important;
     }

     .form-control{
          font-size: 20px;
     }

     footer .col-12{
          text-align: center !important;
          margin-bottom: 10px;
     }

     footer .col-12:last-child{
          margin-bottom: 0;
     }

     .feedback-slider .swiper-slide .container{
          padding: 15px;
     }
 
     .feedback-slider .swiper-slide h3{
          margin: 10px 0 !important;
     }

     .feedback-slider .swiper-slide{
          height: auto;
     }

     .feedback-slider .contentSide{
          height: auto;
          margin-top: 10px;
     }

     .feedback-slider .sliderButtons{
          display: none;
     }

     .topRightRadiusBg{
        height: 400px;
        margin-bottom: 30px;
        margin-top: 30px;
        position: relative;
     }

}

@media (min-width: 768px) and (max-width: 992px){
    
}

@media (min-width: 993px) and (max-width: 1200px){
    
}

@media (min-width: 1201px) and (max-width: 1366px){
    
}

@media (min-width: 1367px){
  
}