@import "../fonts/all.min.css";
@import "../style/fonts.css";

* {
               margin: 0px;
               padding: 0px;
               box-sizing: border-box;
               text-decoration: none;
               list-style: none;
}

.container {
               max-width: 1070px;
               width: 100%;
               margin: 0px auto;
               padding: 0px 15px;
}

:root {
               --m800: "Montserrat-Black";
               --m700: "Montserrat-Bold";
               --m900: "Montserrat-ExtraBold";
               --m500: "Montserrat-Medium";
               --r400: "Montserrat-Regular";
               --m600: "Montserrat-SemiBold";
               --r700: "Roboto-Bold";
               --r400: "Roboto-Regular";
               --blue: rgba(35, 166, 240, 1);
}



body {
               background-color: #252B42;
}

/* header begins from here please take note of that */
.header {
               height: 100vh;
               background-image: url(../images/Ayajonim_background.jpg);
               background-position: center;
               background-repeat: no-repeat;
               background-size: cover;
               padding-top: 19px;
               display: flex;
               flex-direction: column;
}

.first {
               display: flex;
               align-items: center;
               justify-content: space-between;
}

.first-section_logo {
               font-family: var(--m700);
               font-size: 24px;
               line-height: 32px;
               letter-spacing: 0.1px;
               color: white;
               transition: 0.5s;
}

.first-section_logo:hover {
               color: var(--blue);
}


.first-section_list_aside {
               display: flex;
               column-gap: 45px;
               align-items: center;
}



.first-section_list_aside_item_link_2 {
               font-family: var(--m700);
               font-size: 14px;
               line-height: 22px;
               letter-spacing: 0.2px;
               color: white;
               width: 214px;
               height: 52px;
               display: flex;
               align-items: center;
               justify-content: center;
               background-color: var(--blue);
               border-radius: 5px;
               transition: 0.7s;
}

.first-section_list_aside_item_link_2:hover {
               background-color: rgba(255, 255, 255, 0.397);
               border: 1px solid white;
               color: var(--blue);
}

.first-section_icon {
               margin-left: 15px;
               animation-name: first-section_arrow;
               animation-fill-mode: forwards;
               animation-iteration-count: infinite;
               animation-play-state: running;
               animation-direction: alternate;
               animation-timing-function: linear;
               animation-duration: 2s;
}

@keyframes first-section_arrow {
               from {
                              transform: translateX(15px);
               }

               to {
                              transform: translateX(-10px);
               }
}

/* first section begins from here please take note of that */

/* first section begins from here please take note of that */


/* second section begins from here please take note of that */
.second-section {
               display: flex;
               align-items: center;
               flex-grow: 1;
}

.second-section_title {
               color: white;
               font-family: var(--m800);
               font-size: 58px;
               line-height: 80px;
               letter-spacing: 0.2px;
}

.second-section_text {
               color: white;
               font-family: var(--m500);
               font-size: 20px;
               line-height: 30px;
               letter-spacing: 0.2px;
               margin: 35px 0px;
}

.second-section_list {
               display: flex;
               gap: 10px;
}

.second-section_list_item_link {
               color: white;
               font-family: var(--m700);
               font-size: 14px;
               line-height: 22px;
               letter-spacing: 0.02px;
               width: 185px;
               height: 52px;
               display: flex;
               align-items: center;
               justify-content: center;
               border-radius: 37px;
               transition: 1s;
               border: 1px solid white;
}

.second-section_list_item_link:hover {
               background-color: var(--blue);
               border: unset;
}

/* second section begins from here please take note of that */

/* third section begins from here please take note of that */
.third-section_grid {
               display: grid;
               grid-template-columns: repeat(3, 31%);
               grid-template-rows: 1fr;
               column-gap: 35px;
               margin: auto;
               margin-bottom: -150px;
}

.third-section_grid_box {
               background-color: #fff;
               padding: 35px 40px;
               transition: 0.5s;
}

.third-section_grid_box:hover {
               background-color: var(--blue);
               border-radius: 10px;
}

.third-section_grid_icon {
               color: var(--blue);
               font-size: 40px;
               transition: 0.5s;
}

.third-section_grid_box:hover .third-section_grid_icon {
               color: white;
}

.third-section_grid_title {
               font-family: var(--m700);
               font-size: 24px;
               line-height: 32px;
               letter-spacing: 0.1px;
               color: #252B42;
               margin: 10px 0px;
               transition: 0.5s;
}

.third-section_grid_box:hover .third-section_grid_title {
               color: white;
}

.third-section_grid_text {
               font-family: var(--m500);
               font-size: 14px;
               line-height: 20px;
               letter-spacing: 0.2px;
               color: #737373;
               transition: 0.5s;
}

.third-section_grid_box:hover .third-section_grid_text {
               color: white;
}

/* third section ends from here please take note of that */

/* header ends from here please take note of that */




/* main begins from here please take note of that */

/* forth section begins from here please take note of that */
.forth-section {
               margin-top: 338px;
               margin-bottom: 70px;
}

.forth {
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
}

.forth-section_title {
               font-family: var(--m700);
               font-size: 40px;
               line-height: 57px;
               letter-spacing: 0.2px;
               color: white;
               margin-bottom: 10px;
               text-align: center;
}

.forth-section_text {
               font-family: var(--m500);
               font-size: 14px;
               line-height: 20px;
               letter-spacing: 0.2px;
               color: white;
               text-align: center;
}

/* forth section ends from here please take note of that */

/* fifth section begins from here please take note of that */
.grid-fifth-section_grid {
               display: grid;
               grid-template-columns: repeat(3, 31%);
               grid-template-rows: repeat(2, 1fr);
               gap: 35px;
}

.fifth-section_grid_box {
               background-color: #fff;
               padding: 35px 40px;
               transition: 0.5s;
}

.fifth-section_grid_box:hover {
               background-color: var(--blue);
               border-radius: 10px;
}

.fifth-seciton_grid_box_up {
               display: flex;
               column-gap: 14px;
}

.fifth-section_grid_box:hover .fifth-section_grid_icon {
               color: white;
}

.fifth-section_grid_icon {
               color: var(--blue);
               font-size: 40px;
               transition: 0.5s;
}

.fifth-section_grid_title {
               font-family: var(--m700);
               font-size: 16px;
               line-height: 24px;
               letter-spacing: 0.1px;
               color: #252B42;
               transition: 0.5s;
}

.fifth-section_grid_box:hover .fifth-section_grid_title {
               color: white;
}

.fifth-section_grid_text {
               font-family: var(--m500);
               font-size: 14px;
               line-height: 20px;
               letter-spacing: 0.2px;
               color: #737373;
               margin-top: 15px;
               transition: 0.5s;
}

.fifth-section_grid_box:hover .fifth-section_grid_text {
               color: white;
}

/* fifth section ends from here please take note of that */

/* sixth section begins from here please take note of that */
.sixth-section {
               margin-top: 155px;
               margin-bottom: 80px;
}

/* sixth section ends from here please take note of that */


/* seventh section begins from here please take note of that */
.seventh-section_grid {
               display: grid;
               grid-template-columns: repeat(2, 48%);
               grid-template-rows: 1fr;
               column-gap: 35px;
}

.seventh-section_grid_box {
               background-color: #fff;
               display: flex;
               transition: 1.5s;
               overflow: hidden;
}

.seventh-section_grid_box:hover {
               background-color: var(--blue);
               border-radius: 15px;
}

.seventh-seciton_grid_box_img {
               width: 40%;
               transition: 1.5s;
}

.seventh-section_grid_box:hover .seventh-seciton_grid_box_img {
               transform: scale(1.1);
}

.seventh-section_grid_box_right {
               padding: 40px 30px;
               width: 60%;
}

.seventh-section_grid_box_title {
               font-family: var(--m700);
               font-size: 24px;
               line-height: 32px;
               letter-spacing: 0.1px;
               color: #252B42;
}

.seventh-section_grid_box:hover .seventh-section_grid_box_text {
               color: #fff;
}

.seventh-section_grid_box_text {
               font-family: var(--m600);
               font-size: 14px;
               line-height: 24px;
               letter-spacing: 0.2px;
               color: #737373;
               margin-bottom: 17px;
               transition: 1.5s;
}

.seventh-section_grid_box_text_2 {
               font-family: var(--m600);
               font-size: 14px;
               line-height: 20px;
               letter-spacing: 0.2px;
               color: #737373;
               margin-top: 17px;
               transition: 1.5s;
}

.seventh-section_grid_box:hover .seventh-section_grid_box_text_2 {
               color: #fff;
}

/* seventh section ends from here please take note of that */



/* eighth section begins from here please take note of that */
.eighth-section {
               margin-top: 237px;
               margin-bottom: 95px;
}

/* eighth section ends from here please take note of that */

/* ninth section begins from here please take note of that */
.ninth-section_grid {
               display: grid;
               grid-template-columns: repeat(3, 31%);
               grid-template-rows: repeat(3, 1fr);
               gap: 35px;
}

.ninth-section_grid_box {
               background-color: #fff;
               border-radius: 10px;
               padding: 25px 32px 25px 61px;
               position: relative;
               transition: 0.5s;
}

.ninth-section_grid_box:hover {
               background-color: var(--blue);
}

.ninth-section_grid_icon {
               color: var(--blue);
               position: absolute;
               left: 30px;
               top: 25px;

}

.ninth-section_grid_box:hover .ninth-section_grid_icon {
               color: white;
               animation-name: ninth-section_icon;
               animation-fill-mode: forwards;
               animation-timing-function: linear;
               animation-iteration-count: infinite;
               animation-direction: alternate;
               animation-play-state: running;
               animation-duration: 2s;
               transition: 0.5s;
}

@keyframes ninth-section_icon {
               from {
                              transform: translateX(-10px);
               }

               to {
                              transform: translateX(10px);
               }
}

.ninth-section_grid_title {
               font-family: var(--m700);
               font-size: 16px;
               line-height: 24px;
               letter-spacing: 0.1px;
               color: #252B42;
               margin-bottom: 5px;
               transition: 1s;
}

.ninth-section_grid_box:hover .ninth-section_grid_title {
               transform: scale(1.05);
}

.ninth-section_grid_text {
               font-family: var(--m600);
               font-size: 14px;
               line-height: 24px;
               letter-spacing: 0.2px;
               color: #737373;
               transition: 0.5s;
}

.ninth-section_grid_box:hover .ninth-section_grid_text {
               color: white;
}

/* ninth section ends from here please take note of that */


/* tenth section begins from here please take note of that */
.tenth-section {
               margin-top: 192px;
               margin-bottom: 80px;
}

/* tenth section ends from here please take note of that */


/* eleventh section begins from here please take note of that */
.video {
               width: 100%;
               margin-bottom: 20px;
}



/* eleventh section ends from here please take note of that */


/* main ends from here please take note of that */




/* footer begins from here please take note of that */
.footer {
               padding: 15px 0px;
               background-color: rgb(51, 48, 48);
               display: flex;
               align-items: center;
               justify-content: center;
}

.footer_box {
               display: flex;
               justify-content: space-between;
}

.footer_text {
               color: white;
               font-size: 18px;
               font-family: var(--m600);
}

.footer_icon {
               color: var(--blue);
               font-size: 20px;
}
.footer_link_box{
               display: flex;
               gap: 20px;
}
.footer_link{
               display: block;
}
/* footer ends from here please take note of that */



/* tabrik begins from here please take note of that */
.tabrik_title {
               text-align: center;
               margin: 20px 0px;
}

.tabrik_text {
               color: white;
               font-family: var(--m600);
               font-size: 16px;
               line-height: 25px;
               text-align: justify;
               margin-top: 20px;
               margin-bottom: 30px;
}

.suratlar_img_special {
               width: 100%;
}

/* tabrik ends from here please take note of that */